Question

如何在显示块和隐藏时添加平滑过渡：

$(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/

Answer 2

您可以尝试fadeIn和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

使用show('slow')，hide('slow')，toggle('slow')等jQuery方法可以使转换更顺畅。

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

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

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

其他有用，有趣和好的方法是.animate（）和jQuery ui的幻灯片效果（https://api.jqueryui.com/slide-effect/）

干杯！

编辑：我也要写关于fadeIn和fadeOut方法的文章。但莫里斯佩里更快地指出了一些例子：）

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

3 个答案: