如何向此脚本添加平滑过渡

Question

How do I add smooth transitions when display block and hide:

$(document).ready(function(){
    $(".userBox").mouseover(function () {
        $(this).find('.inBox').css({ display: "block" });
        $(this).find('.boxDisc').css({ display: "block" });
    $(".userBox").mouseout(function () {
        $(this).find('.inBox').css('display', 'none');
        $(this).find('.boxDisc').css('display', 'none');
    });
  });
});

Because right now it's instant and doesn't look good. Thanks!

Answer 1

One way is to use jQuery fading methods :

$(document).ready(function () {
    $(".userBox").mouseover(function () {
        $(this).find('.inBox').stop().fadeIn('fast');
        $(this).find('.boxDisc').stop().fadeIn('fast');
        $(".userBox").mouseout(function () {
            $(this).find('.inBox').stop().fadeOut('fast');
            $(this).find('.boxDisc').stop().fadeOut('fast');
        });
    });
});

Example:

http://jsfiddle.net/L9t4J/

Answer 2

You could try fadeIn and fadeOut:

$(document).ready(function(){
    $(".userBox").mouseover(function () {
        $(this).find('.inBox').fadeIn(500);
        $(this).find('.boxDisc').fadeIn(500);
    $(".userBox").mouseout(function () {
        $(this).find('.inBox').fadeOut(500);
        $(this).find('.boxDisc').fadeOut(500);
    });
  });
});

Answer 3

using jQuery methods such as show('slow') , hide('slow') , toggle('slow') will make transitions smoother.

http://api.jquery.com/show/

http://api.jquery.com/hide/

http://api.jquery.com/toggle/

Other useful, playful and great methods are .animate() and jQuery ui's slide effects ( https://api.jqueryui.com/slide-effect/ )

Cheers!

Edit: I was going to write about the fadeIn and fadeOut methods too. But Maurice Perry was quicker to point those out with an example :)