Jquery fadeOut/fadeIn callback not working

callback, jquery, jquery-callback

Solution

The problem is that the .fadeOut() callback is called once per animated element, not once at the end. You could modify your code to keep a counter of how many times it has been called, but far easier - assuming at least jQuery 1.6 - is to use .promise(), which will resolve after all the associated animations complete:

$(document).ready(function () {
    var $lis = $("li.slider"),
        start = 0;

    $lis.hide()
        .slice(start, start + 4)
        .show();

    $("button").click(function () {
        $lis.slice(start, start + 4)
            .fadeOut(500)
            .promise()
            .done(function () {
                start += 4;
                if (start > $lis.length) {
                    start = 0;
                }
                $lis.slice(start, start + 4).fadeIn();
            });
    });
});

Demo: http://jsfiddle.net/w7Yuk

I made a couple of other changes to your code, e.g., caching the jQuery object with the li elements, and removing the "end" variable.

Problem

i m building a little script to animate a list. Here is my html structure: ``` <ul> <li class="slider"> Item-1 </li> <li class="slider"> Item-2 </li> <li class="slider"> Item-3 </li> ... <li class="slider"> Item-13 </li> <li class="slider"> Item-14 </li> <li class="slider"> Item-15 </li> </ul> <button> Next </button> ``` I'm displaying only four li at one time, the "next" button fadeOut the displayed four li et fadeIn the next four ones. But the fades are applying both together. I've tried to use callback function on the first fade but i can't make it work. here is the script: ``` $('li:gt(3)').css('display', 'none'); //Define the interval of li to display var start = 0; var end = 4; //Get the ul length var listlength = $("li").length; $("button").click(function() { // FadeOut the four displayed li $('ul li').slice(start,end).fadeOut(500, function(){ // Define the next interval of four li to show start = start+4; end = end+4; // Test to detect the end of list and reset next interval if( start > listlength ){ start = 0; end = 4; } //Display the new interval $('ul li').slice(start,end).fadeIn(500); }); }); ``` Any clues?

Original source