jquery - jQuery css 切换 - 需要添加淡入淡出动画过渡

Question

我想在这个片段中添加一个动画过渡，我用它来在 display: none 和 display: block 之间切换

    jQuery(".slide").hover(
function() {
    jQuery(this).find(".data").css("display","block");
},
function() {
    jQuery(this).find(".data").css("display","none");
    }
    );

非常感谢任何帮助......我的 jQuery 非常有限。我尝试了各种项目，但似乎无法获得好的语法来产生效果。

Answer 1

你可以使用fadeToggle方法。

$(".slide").hover(function() {
    $(this).find(".data").fadeToggle();
});

Answer 2

您可以使用 .hide() 和 .show()

  jQuery(".slide").hover(
function() {
    jQuery(this).find(".data").show("slow", "swing")
},
function() {
    jQuery(this).find(".data").hide("slow", "swing")
    }
    );

这是来自jquery网站：

$(selector).hide(speed,easing,callback)

• 速度可以慢，快或毫秒
• 缓动可以是摆动的或线性的
• 回调可用于调用函数

看这里

我总是使用显示并隐藏在 CSS 显示上。

编辑：

你也可以试试 .slideUp()，它通过滑动来隐藏元素。看这里

  jQuery(".slide").hover(
function() {
    jQuery(this).find(".data").slideDown("slow", "swing")
},
function() {
    jQuery(this).find(".data").slideUp("slow", "swing")
    }
    );