动画回调不正确

Question

我正在尝试使用JQuery中的动画功能和两个嵌套的Show / Hide函数来实现图像切换效果。

我的问题是，当图片保持在回调函数之外时，显示/隐藏效果非常好，但是当我将它们放在回调函数中时，显示/隐藏函数什么也不做！

这是我的代码。

这不起作用。(隐藏和显示回调正常工作)

$(".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;
});

这确实行得通。

$(".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;
});

如果我把那些show和hide调用放在Animations回调函数中，图像不会发生任何变化。

Answer 1

我认为这是因为您需要设置持续时间参数来使用show和hide函数的回调参数，所以它会给出类似这样的结果：

$(".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;
});