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()和fadeOut()会更好。

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

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

Demo

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'）

这样的持续时间

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

3 个答案: