[Solved] An animation queue bug of carousel

by


Based on your code everything happens immediately. There are no callbacks and thus no waiting for the animations to end. Your code can be reorganized to make it a bit more readable and easier to refactor. Here is what i would try:

function show(pageNumber){
    return picList.eq(pageNumber)
    .animate({
        opacity:'show'
    },defaultAnimateDelay.show).promise();
}

function hide(pageNumber){
    return picList.eq(pageNumber)
    .stop(false,true)
    .siblings()
    .stop(false,false)
    .animate({
        opacity:'hide'
    },defaultAnimateDelay.hide).promise();
}

function Carousel(pageNumber){
    var promise = hide(pageNumber);
    promise.done(function(){
        show(pageNumber);
    });

    play.find('a')
    .eq(pageNumber)
    .addClass('current')
    .siblings('').removeClass('current');
}

This ensures that the hide animation completes before beginning the show animation. Another option would be to use the built-in callbacks but i find this easier to follow. I am not sure if all the stop statements are necessary but left them in.

Another issue (one that effects the initial page state) is that nothing is initially hidden. To resolve that is just simply updating the init code as follows:

(function(picListLength){
    var playHtml="";
    for(var i=0; i<picListLength; i++){
        playHtml+='<a href="#" data-number="'+i+'">'+(i+1)+'</a>';
    }
    play.html(playHtml);
    hide(0); // hide all but one
})(picList.length);

JSFiddle: http://jsfiddle.net/infiniteloops/CUYbL/

JQuery Promise: http://api.jquery.com/promise/

solved An animation queue bug of carousel