动画回调无法正常工作

Question

我想在JQuery中使用Animation函数和两个嵌套的显示/隐藏函数来实现图像切换效果。

我的问题是，当保存在回调函数之外时，图像显示/隐藏完全正常，但是当我将它们放在里面时，显示/隐藏功能根本不起作用！

这是我的代码。

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

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

如果我把那些那些显示和隐藏调用里面的动画回调没有任何反应的图像。

Answer 1

我认为，那是因为你需要把时间参数使用显示和隐藏功能的回调参数，所以它会给类似的东西：

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