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

【问题标题】：jQuery css toggle - need to add fade in fade out animation transitionjQuery css 切换 - 需要添加淡入淡出动画过渡
【发布时间】：2013-04-05 19:38:57
【问题描述】：

我想为这个 sn-p 添加一个动画过渡，我用它来在 display: none 和 display: block 之间切换

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

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

【问题讨论】：

标签： jquery css jquery-animate toggle

【解决方案1】：

你可以使用 .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)

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

见here

我总是使用显示和隐藏在 css 显示上。

编辑：

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

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

【讨论】：

谢谢，这很好用，看起来很棒。我怎样才能做类似上下滑动的效果而不是摆动。
没问题。尝试线性而不是摆动。另一种选择是使用 .slideUp()。请参阅我编辑的帖子。我可能以错误的方式上下滑动。
在旁注中，我很欣赏对 jQuery 站点的引用。我希望它更“对学习者友好”，而不是那么深奥。我花了很多时间阅读那里寻找解决方案，但我从来没有能够破译该网站足以真正找到解决方案。如果他们把它简化一点LOL，对初学者来说会很好。
其实我知道你的意思。我引用它们是因为它们是“官方”指南，但实际上我从 w3schools 学到了更多。 w3schools.com/jquery/jquery_hide_show.asp

【解决方案2】：

您可以使用fadeToggle 方法。

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

【讨论】：

谢谢，我也喜欢这种方法！