CODEWITHSUNDEEP
jqueryjquery-animate
Imaje
Imaje

Reputation: 11

Animation Callback not working correctly

I am trying to achieve an image switch effect using the Animation function in JQuery and two nested Show / Hide functions.

My problem, is that the Images show/hide perfectly fine when kept outside of the Callback function, however when I put them inside, the show/hide function does nothing at all!

Here's is my code.

This does not work. (hide and show callbacks work correctly)

$(".tabs li").click(function(){
    var clicked = "";
    clicked = $(this).attr("id");       
    clicked = clicked.substr(clicked.length-1);
    $(".tabs li").removeClass("active");
    $(this).addClass("active");
    $(".tab-container").animate({left: '-1000px'},400,function(){
        $("#image"+current).hide(function(){
         $("#image"+clicked).show(function(){
            $(".tab-container").animate({left: '400px'}, 400);
         });
        });
    });
    //$(".tab-container").animate({left: '400px'});
    current=clicked;
});

This does work... 

$(".tabs li").click(function(){
    var clicked = "";
    clicked = $(this).attr("id");       
    clicked = clicked.substr(clicked.length-1);
    $(".tabs li").removeClass("active");
    $(this).addClass("active");
    $("#image"+current).hide();
    $("#image"+clicked).show();
    $(".tab-container").animate({left: '-1000px'},400);
    $(".tab-container").animate({left: '400px'}, 400);
    current=clicked;
});

If I put those those show and hide calls inside the Animations callback nothing happens to the images.

Upvotes: 1

Views: 573

Answers (1)

GregM
GregM

Reputation: 2654

I thinks it's because you need to put the duration parameters to use the callback parameter of the show and hide function, so it would give something like that : 

$(".tabs li").click(function(){
    var clicked = "";
    clicked = $(this).attr("id");       
    clicked = clicked.substr(clicked.length-1);
    $(".tabs li").removeClass("active");
    $(this).addClass("active");
    $(".tab-container").animate({left: '-1000px'},400,function(){
        $("#image"+current).hide(500, function(){
         $("#image"+clicked).show(500, function(){
            $(".tab-container").animate({left: '400px'}, 400);
         });
        });
    });
    //$(".tab-container").animate({left: '400px'});
    current=clicked;
});

Upvotes: 1

Related Questions