简单JQuery淡入/淡出

Simple JQuery Fade In/Out

本文关键字：淡出 淡入 JQuery 简单      更新时间：2023-09-26

所以我想做的是让一个带有动画的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%。之后，它会像预期的那样逐渐消失，但当我悬停按钮时，它不会再次出现。

有什么想法吗？谢谢谢谢

使用fadeTo或fadeToogle如何？

以下是使用fadeTo:制作的一个小片段http://jsbin.com/agojux？
您可以在此处查看其来源

这是您的代码，但有点修改：

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的on。。你的代码看起来像这样：

$("selector").on({
mouseenter: function () {
 //fade in goes here
},
mouseleave: function () {
//fade out goes here
 }
});

悬停很酷，但悬停切换会让事情变得一团糟。on使这成为一个快照。同样对于你的不透明性，我可能会使用fadeTo。

这是关于文档的。

相关文章：