Question

New list items are generated by JS.
Each new list item comes in with a nice animation. Now I don’t want to see an animation on the first list item.

So far I tried to add slice(1) to the code, but no luck:

$('li.show').slice(1).animate({left: '-=100'}, 300);

How can I make this work using the lastest version of JQuery?

Answer 1

If you are using an AJAX request to build your list then you will need to call the code you posted inside a callback function for the AJAX request so the added HTML will be present in the DOM before you try to manipulate it:

$.get('<URL>', function (serverResponse) {

    //append the new list-items to the list, select them, un-select the first index, then animate the remaining elements
    $('ul').append(serverResponse).children('.show').slice(1).animate({left: '-=100'}, 300);
});

Note that this code snippet expects your server-side script to output valid HTML that can be added right into the DOM.