Question

我试图通过增加＆＃39; margin-right＆＃39;来尝试通过jQuery动画一系列列表项。列表项的属性，但我的动画功能似乎没有运行。

我已经在JSFiddle上发布了所有必要的代码： 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");


}()));

你如何动画列表项目通过jQuery右键滑动？

1 个答案: