jquery - 第一次 jQuery fadeOut() 执行不工作

Question

我有下面的 jQuery，它基本上在两个屏幕之间进行转换。然而，第一次 .fadeOut() 在第一个函数上执行时，它不会应用“慢”，只有在执行另一个函数后，过渡才会顺利进行。

$(".next").click(function(){
    $(".first").fadeOut("slow").removeClass("active");
    $(".second").fadeIn("fast").addClass("active");
});
$(".prev").click(function(){
    $(".second").fadeOut("slow").removeClass("active");
    $(".first").fadeIn("fast").addClass("active");
});
$(".close").click(function(){
    $(".onBoarding").css("display","none");
});

我试图让它与 .delay() 一起工作，但它不起作用。有什么想法吗？

Answer 1

(我没有用于测试的 html，但我认为这可行)

.delay 没有工作，因为 .removeClass 没有经过队列，你需要等待动画完成然后删除类，你通过将回调函数传递给 fadeOut 和 fadeIn 方法来执行此操作。

$(".next").click(function(){
    $(".first").fadeOut("slow", function () {
        $(this).removeClass("active");
    });
    $(".second").fadeIn("fast", function () {
        $(this).addClass("active");
    });
});
$(".prev").click(function(){
    $(".second").fadeOut("slow", function () {
        $(this).removeClass("active");
    });
    $(".first").fadeIn("fast", function () {
        $(this).addClass("active");
    });
});
$(".close").click(function(){
    $(".onBoarding").css("display","none");
});

编辑:

而且因为我喜欢引导人们走我认为正确的道路，所以我建议您阅读 caching jQuery objects .下面我给你留下了一个在你的代码中使用它的例子:

var $next = $(".next");
var $prev = $(".prev");

var $close = $(".close");
var $onBoarding = $(".onBoarding");

var $first = $(".first");
var $second = $(".second");

$next.click(function(){
    $first.fadeOut("slow", function () {
        $(this).removeClass("active");
    });
    $second.fadeIn("fast", function () {
        $(this).addClass("active");
    });
});
$prev.click(function(){
    $second.fadeOut("slow", function () {
        $(this).removeClass("active");
    });
    $first.fadeIn("fast", function () {
        $(this).addClass("active");
    });
});
$close.click(function(){
    $onBoarding.css("display","none");
});