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

Question

当我将鼠标悬停在特定元素上时，我目前正在使用这个小 jQuery 片段来淡入/淡出 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 会淡入它上面......

有任何想法吗？

Answer 1

使用fadeIn()andfadeOut()会更好。

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

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

演示

Answer 2

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

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

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

Answer 3

CSS：

.wall-block-content {display:none}

jQuery：

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

您还可以添加像 fadeToggle('slow') 这样的持续时间