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

Question

如何在显示 block 和隐藏时添加平滑过渡:

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

因为现在它是即时的，而且看起来不太好。谢谢!

Answer 1

一种方法是使用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');
        });
    });
});

示例:

<强> http://jsfiddle.net/L9t4J/