jquery - 向这个 .on 函数添加淡入淡出

Question

有没有办法可以将 .fadein 方法添加到以下 jQuery 代码中？

目前，当您将鼠标悬停在 .button div 上时，它会显示另一个具有相应 ID 的 div，但更改是即时的，而且看起来有点生涩，所以我想在每个过渡之间添加一个漂亮的小淡入淡出

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

Answer 1

尝试改变

 $('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();
 });

Answer 2

试试这样：

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

如果它闪烁，您可能需要添加stop()方法。