how to fade the toggle so the transition looks softer

问题

How could i make the toggle transition look softer? I'm "toggling" 2 divs:

$(document).ready(function(){

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

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

});

this is the fiddle

回答1:

You can use .fadeToggle().

Edit: If you absolutely position .b and relatively position li, you only need to toggle .b:

Working Demo: 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;
}

回答2:

Use fadeIn and fadeOut methods.

回答3:

Try hiding and toggling:

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

回答4:

jQuery fadeIn ( http://api.jquery.com/fadeIn/ ) and fadeOut ( http://api.jquery.com/fadeOut/ ) does just that.

来源：https://stackoverflow.com/questions/8157155/how-to-fade-the-toggle-so-the-transition-looks-softer