初めてjQuery fadeOut（）を実行しても動作しません

Question

私は下のjQueryを持っています。基本的には2つの画面間で遷移します。しかし、最初の関数で.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"); 
}); 

I）は、（.delayで動作させることを試みたが、それは動作しません。 アイデア

Answer 1

を実行するために最初のアニメーションの完全なコールバックを使用している場合がキューを通過しないために.delayが機能しなかった場合、アニメーションが終了するまで待ってからクラスを削除する必要があります。コールバック関数を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"); 
}); 

EDIT：

そして私は私が正しい道だと思うものに人々を導くために好​​きなので、私はあなたがについて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"); 
}); 

Answer 2

おそらく、隠れ要素が最初に完成した後にフェードインしたいのですか？質問は本当に明確ではない

ので

（私はテストのためのhtmlを持っていないが、私はこれが仕事だと思う）は、第2の

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