jQuery - 在动画悬停之前隐藏元素答案

【问题标题】：jQuery - Hide element before animate hoverjQuery - 在动画悬停之前隐藏元素
【发布时间】：2013-01-27 20:52:55
【问题描述】：

当我将鼠标悬停在特定元素上时，我目前正在使用这个小 jQuery sn-p 淡入/淡出 div。

$(".wall-block-content").hover(function(){
    $(this).stop().animate({'opacity':'1'},300); //stop for preveting conflict
},function(){
    $(this).stop().animate({'opacity':'0'},300); //100 for time/speed
});

除了“.wall-block-content” div 在页面加载时可见之外，它工作正常，当我需要隐藏它时。

这里有一些示例标记，以防万一；

<div class="grid-block">

   <img src="images/thumbnail.jpg"/>

    <div class="wall-block-content">

        <!-- SOME FANCY CONTENT HERE -->

    </div><!--/.wall-block-content-->

</div><!--/.grid-block-->

所以基本上在页面加载时可见的只有 thumbnail.jpg 图像，然后当有人将鼠标悬停在该图像上时，.wall-block-content div 会淡入它上面...

有什么想法吗？

【问题讨论】：

你是用 display:none 还是 opacity:0 by css 隐藏它？
两者都不是。如果我使用任一 CSS 规则，则动画功能将不起作用...
如果你通过 css 将不透明度设置为 0，它将起作用。或使用 show().animate ... 和 .animate().hide()
效果很好！谢谢！！

标签： jquery jquery-animate

【解决方案1】：

使用fadeIn() 和fadeOut() 会更好。

$('#imgtest').hover(function(){
    $('.wall-block-content').fadeIn('slow');

},function(){
    $('.wall-block-content').fadeOut('slow');
});

Demo

【讨论】：

【解决方案2】：

为什么不使用 jQuery 函数 .fadeIn() 和 .fadeOut()？

http://api.jquery.com/fadeIn/
http://api.jquery.com/fadeOut/

对于您的问题：
.wall-block-content { display: none; }

【讨论】：

jQuery 真的不是我的强项。我如何将它与悬停一起使用？
$('.grid-block img').hover(function(){ $('.wall-block-content').fadeIn('slow'); },function(){ $('.wall-block-content').fadeOut('slow'); });

【解决方案3】：

CSS：

.wall-block-content {display:none}

jQuery:

$('#imgtest').hover(function(){
    $('.wall-block-content').fadeToggle();
});

您还可以添加一个持续时间，例如 fadeToggle('slow')

【讨论】：