你如何動畫列表項目通過jQuery右鍵滑動？

Question

我試圖通過增加列表項的'margin-right'屬性來通過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");


}()));