javascript - 你如何通过 jQuery 动画化列表项向右滑动？

Question

我正在尝试通过增加列表项的“margin-right”属性来通过 jQuery 为列表项数组设置动画，但是我的动画功能似乎没有运行。

我已经在 J​​SFiddle 上发布了所有必要的代码: http://jsfiddle.net/Q6kp3/419/

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();

}()));

如果可能，我还想在列表项滑动时淡入淡出，但我知道 Javascript 会异步执行此操作。有人知道解决办法吗？谢谢。

Answer 1

只是使用了 $("li") 选择器而不是 listItems 变量并且它起作用了...

这是 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");


}()));