Question

所以我要做的就是让一个带动画的div只在我悬停按钮时出现。我希望div在页面悬停之前不可见，并且我希望它在鼠标不再悬停按钮后返回隐身状态。另外，我想用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％。在那之后，它会像它应该的那样逐渐消失，但当我将鼠标悬停在按钮上时它不再出现。

有什么想法？谢谢谢谢！

Answer 1

如何使用fadeTo或fadeToogle？

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

Answer 2

老实说，在这种情况下最好使用jQuery的on ..你的代码看起来像这样：

$("selector").on({

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

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

悬停很酷，但是悬停翻转的事情可能会变得混乱。 on使这一点变得轻而易举。另外，对于你的不透明度，我可能会改用fadeTo。

Here is the on documentation.

Answer 3

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>

简单的JQuery淡入/淡出

3 个答案: