简单的JQuery淡入/淡出

所以我想要做的是获得一个动画div只有当我悬停按钮显示。我希望该div在页面悬停之前不可见，并且我希望它在鼠标不再悬停按钮时不会被隐藏。另外，我想用JQuery来做这件事，因为我已经远离它太久了。简单的JQuery淡入/淡出

jQuery代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
    $(document).ready(function(){   
     $('#about').hover(function(){ 
      $('#about_hover').stop(true, true).animate({ 
       width: '150px', 
       opacity: '0.8', 
      }, 300); 
     }, function(){ 
      $('#about_hover').animate({ 
       width: '0px', 
       opacity: '0', 
      }, 300); 
     }); 
    }); 
</script>

HTML代码：

<div id="about_hover"> 
    <img src="images/hover.gif"> 
</div> 
<a href="about.html" id="about"><img src="images/menu/about.png"></a> 
<br>

CSS：

#about_hover { 
    text-align: right; 
    width: 150px; 
    float: left; 
    margin: 5px 0px 0px 100px; 
    overflow: hidden; 
}

我得到了一些问题，但。首先，div内的图像在不透明度为100％时加载，而在我第一次将它悬停后，图像只能达到80％。之后，它会像应该消失的那样消失，但是当我悬停按钮时它不会再次显示。

有什么想法？谢谢谢谢！

来源

2012-03-12 Bruno Moutinho

无需停止在“关”悬停？ – Orbling 2012-03-12 18:32:46

我没有看到任何代码错误。我认为宽度的动画有点奇怪，但它代码明智。 jsFiddle：http://jsfiddle.net/j08691/45nHH/ – j08691 2012-03-12 18:38:21

它可能与其他的CSS元素有关？它在jsFiddle中工作正常。 – 2012-03-12 21:55:48

老实说，这可能是最好使用jQuery的on在这种情况下..您的代码将是这个样子：

$("selector").on({ 

mouseenter: function() { 
//fade in goes here 
}, 

mouseleave: function() { 
//fade out goes here 
} 
});

哈弗是冷静和所有，但事情会导致混乱与悬停切换。 on使这一瞬间。另外对于你的不透明度，我可能会使用fadeTo。

Here is the on documentation.

来源

2012-03-12 18:45:40 Sethen

只是一个简短的说明，绑定已弃用，首选项是使用$（'selector'）。在 – Nimnam1 2012-03-12 18:56:47

更改我的代码以反映这一点。 – Sethen 2012-03-12 21:19:05

Here是你的代码，但一点点修改：

JS：

$('#about_hover').width(0);   
$('#about').hover(function(){ 
      $('#about_hover').stop(true, true).animate({ 
       width: '150px', 
       opacity: '0.8', 
      }, 300); 
     }, function(){ 
      $('#about_hover').animate({ 
       width: '0px', 
       opacity: '0', 
      }, 300); 
     });

HTML：

<a href="about.html" id="about"><img src="http://www.placekitten.com/20/20/"></a><br> 
<div id="about_hover"><img src="http://www.placekitten.com/80/80/"></div>

来源

2012-03-12 18:56:46

我会尝试绑定。至于你发布亚历山大的代码，它似乎并没有工作。这些图像根本不会动画：S – 2012-03-12 19:03:51

'绑定'不会带来任何好处。但如果想尝试，请使用更好的['on']（http://api.jquery.com/on/）作为更现代的选择。“绑定”据说已经过时 – 2012-03-12 19:06:30

顺便说一句，我的例子在Chrome17和IE9中为我工作：http://jsfiddle.net/ayezutov/45nHH/2/ – 2012-03-12 19:07:14

如何使用fadeTo或fadeToogle？

下面是使用fadeTo制作的小片段：http://jsbin.com/agojux？
你可以看一下它的源here

来源

2012-03-12 19:44:46

简单的JQuery淡入/淡出

回答

相关问题