Question

我正在尝试使用JQuery中的Animation函数和两个嵌套的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;
});

如果我将那些显示和隐藏调用放在动画回调中，那么图像就不会发生任何变化。

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;
});

动画回调无法正常工作

1 个答案: