[英]How do you animate list items to slide right via jQuery?
I am trying to animate an array of list items via jQuery by increasing the 'margin-right' attribute of the list items, however my animate functions don't seem to be running. 我试图通过增加列表项的'margin-right'属性来通过jQuery动画一个列表项的数组,但是我的动画函数似乎没有运行。
I've posted all the necessary code on JSFiddle: http://jsfiddle.net/Q6kp3/419/ 我在JSFiddle上发布了所有必要的代码: http : //jsfiddle.net/Q6kp3/419/
JS code: JS代码:
$(document).ready((function (){
"use strict";
//$ indicates selector
var $list = $("#list_container #url_list");
var listItems = $list.children('li');
var listLength = listItems.length;
var i = 0;
var tmplt = "<li class=\"list_item\"><p>{{url}}</p></li>";
//dynamically populates the list and animates
function updateList ( urls ) {
$list.html($.map( urls, function ( url ) {
return tmplt.replace( /{{url}}/, url );
}).join(""));
}
function slideList(){
listItems.animate({'margin-right': '-=250px'});
listItems.animate({'border-width': '+=1px'});
listItems.animate({'padding': '+=10px'});
}
//fades the list into view
$list.hide(1000);
updateList(["thing 1", "thing 2", "thing 3", "thing 4"]);
//$list.fadeIn(2000);
slideList();
}()));
If possible, I would also like to fade in my list items while they are sliding, but I know that Javascript will execute this asynchronously. 如果可能的话,我还希望在滑动时淡入我的列表项,但我知道Javascript将异步执行此操作。 Anyone know a way around that? 有人知道解决方法吗? Thanks. 谢谢。
Just used $("li")
selector instead of listItems variable and it worked... 刚刚使用$("li")
选择器而不是listItems变量,它工作...
Here is the JS code ( http://jsfiddle.net/Q6kp3/485/ ): 这是JS代码( http://jsfiddle.net/Q6kp3/485/ ):
$(document).ready((function (){
//$ indicates selector
var $list = $("#list_container #url_list");
var $listItems = $("#list_container #url_list .list_item");
var tmplt = "<li class=\"list_item\"><p>{{url}}</p></li>";
//dynamically populates the list and animates
function updateList ( urls ) {
$list.html($.map( urls, function ( url ) {
return tmplt.replace( /{{url}}/, url );
}).join(""));
}
//fades the list into view
//$list.hide(1000);
updateList(["thing 1", "thing 2", "thing 3", "thing 4"]);
//$list.fadeIn(2000);
$("li").animate({
'margin-right' : '-=250px',
'border-width' : '+=1px',
'padding' : '+=10px'
}, "slow");
}()));
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.