Javascript 如何通过jQuery设置列表项向右滑动的动画？

我试图通过jQuery增加列表项的“右边距”属性来设置列表项数组的动画，但是我的动画功能似乎没有运行

我已经在JSFIDLE上发布了所有必要的代码：

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

}()));

$（文档）.ready（（函数（）{
“严格使用”；
//$表示选择器
var$list=$（“#list_container#url_list”）；
var listItems=$list.children（'li'）；
var listLength=listItems.length；
var i=0；
var tmplt=“
{{url}
”；
//动态填充列表并设置动画
函数更新列表（URL）{
$list.html（$.map（url、函数（url））{
返回tmplt.replace（/{{url}}/，url）；
}).加入（“”）；
}
函数slideList（）{
动画（{'margin-right'：'-=250px'}）；
动画（{'border-width'：'+=1px'}）；
动画（{'padding'：'+=10px'}）；
}
//将列表淡入视图
$list.hide（1000）；
更新列表（[“第1件”、“第2件”、“第3件”、“第4件”）；
//$list.fadeIn（2000年）；
slideList（）；
}()));

如果可能的话，我也希望在列表项滑动时淡入，但我知道Javascript将异步执行。有人知道解决这个问题的方法吗？谢谢。

刚刚使用了

$（“li”）

选择器而不是listItems变量，它工作正常

下面是JS代码（）：

$（文档）.ready（（函数（）{
//$表示选择器
var$list=$（“#list_container#url_list”）；
var$listItems=$（“#列表_容器#url_列表.列表_项目”）；
var tmplt=“
{{url}
”；
//动态填充列表并设置动画
函数更新列表（URL）{
$list.html（$.map（url、函数（url））{
返回tmplt.replace（/{{url}}/，url）；
}).加入（“”）；
}
//将列表淡入视图
//$list.hide（1000）；
更新列表（[“第1件”、“第2件”、“第3件”、“第4件”）；
//$list.fadeIn（2000年）；
$（“li”）。动画({
“右边距”：“-=250px”，
“边框宽度”：“+=1px”，
“填充”：“+=10px”
}“慢”）；
}()));

我在这里看到一些转换<代码>http://jsfiddle.net/Q6kp3/422/。如果您将

js

放入

$（document）.ready（（function（）{}

）中，它会在页面加载时发生。它不会等待任何事件。尽管现在我正试图取消动画（）在html中直接设置的“右边距”（margin right）功能使链接：将鼠标悬停在“右边距”将起作用，并且不会被动画的动作覆盖。

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


}()));