第一次jQuery fadeOut（）执行不起作用

Question

我有下面的jQuery，它基本上在两个屏幕之间进行转换。但是.fadeOut（）第一次在第一个函数上执行时，它不会应用＆＃34; slow＆＃34;，只有在执行了另一个函数后，转换才会顺利发生。

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

也许您希望隐藏元素在第一次完成后淡入？问题不是很清楚

如果是这样，请使用第一个动画的完整回调来执行第二个

$(".next").click(function() {
  $(".first").fadeOut("slow", function() {
    $(this).removeClass("active")
    $(".second").fadeIn("fast").addClass("active");
  });
});

Answer 2

（我没有用于测试的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");
});