How do you animate list items to slide right via jQuery?

Question

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.

I've posted all the necessary code on JSFiddle: http://jsfiddle.net/Q6kp3/419/

JS code:

$(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. Anyone know a way around that? Thanks.

Answer 1

Just used $("li") selector instead of listItems variable and it worked...

Here is the JS code ( 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");


}()));