如何淡化切换，使过渡看起来更柔和

Question

如何让切换过渡看起来更柔和？我正在“切换”2个div：

$(document).ready(function(){

    var tweet = $("ul.tweets li");

    tweet.hover(function(){
        $(this).find('.a').toggle()
            .end().find('.b').toggle();
    });

});

这是fiddle

Answer 1

您可以使用.fadeToggle()。

修改：如果您绝对定位.b且相对位置li，则只需切换.b：

工作演示： http://jsfiddle.net/kpNY4/8/

tweet.hover(function () {
    $(".b", this).fadeToggle();
});

CSS：

li { position: relative; }
.b {
    display: none;
    background: #EEEEEE;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

Answer 2

使用fadeIn和fadeOut方法。

Answer 3

尝试隐藏和切换：

tweet.hide('medium', function() {
 $(this).find('.a').toggle().end().find('.b').toggle();
});

Answer 4

jQuery fadeIn（http://api.jquery.com/fadeIn/）和fadeOut（http://api.jquery.com/fadeOut/）就是这样做的。