jquery - この .on 関数にフェードインを追加します

Question

次の jQuery コードに .fadein メソッドを追加する方法はありますか?;

現在、.button div にカーソルを合わせると、対応する ID を持つ別の div が表示されますが、変更は即座に行われ、少しぎくしゃくしているように見えるので、各トランジションの間に素敵な小さなフェードを追加したかったのです

$(".button").on("mouseover",function(){
    $('div.tagline').hide();
    $('#tag-' + this.id).show();
});

score 2 · Accepted Answer

変えようとする

 $('div.tagline').hide();
 $('#tag-' + this.id).show();

と

 $('div.tagline').fadeOut();
 $('#tag-' + this.id).fadeIn();

この形式で書かれていると、fadeInとfadeOutは同時に（並行して）実行されます：fadeOutを終了させてからfadeInを実行したい場合は、

 var self = this;
 $('div.tagline').fadeOut(function() {
     $('#tag-' + self.id).fadeIn();
 });

score 0 · Accepted Answer

そのようにしてみてください：

$(".button").on("mouseover",function(){
    $('div.tagline').stop().fadeOut();
    $('#tag-' + this.id).stop().fadeIn();
});

ちらつきがある場合は、 stop()メソッドを追加する必要がある場合があります。

2 に答える 2