这篇文章运用简单易懂的例子给大家介绍jQuery怎么实现淡入于淡出动画效果，代码非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。
淡入与淡出
hide()和show()函数的动画都在不断的改变着大小,实际上这种做法非常的混乱,所以我们此时最好的做法是可以进行淡入与淡出的效果
淡入操作:fadeIn(时间,function(){})
淡出操作:fadeOut(事件,function(){})
自己设置淡出操作fadeTo(事件,淡出率,function(){}),淡出率不超过1
淡出操作
<html>
<head>
<meta charset="utf-8"/>
<title>jQuery的动画函数</title>
<script type="text/javascript" src="js/jQuery.min.js" charset="utf-8"></script>
<link rel="style/sheet" type="text/css" href="css/style.css"/>
<script type="text/javascript">
$(function(){
//设置层淡出操作
$(myimg).fadeOut(5000,function(){
$(this).fadeIn(5000)
});
});
</script>
</head>
<body>
<div id="myDiv">
<img src="images/gd.jpg" id="myimg" width="500px"/>
</div>
</body>
</html>使用fadeTo（）观察淡出率问题
$(function(){
//设置淡出率
$(myimg).fadeTo(5000,0.3,function(){});
});
如果设置为0表示完全淡出，如果设置为1,表示不单出。
如果已经懂得了淡入于淡出的操作，可以实现一排按钮
利用淡入于淡出实现菜单的功能
<html>
<head>
<meta charset="utf-8"/>
<title>jQuery的动画函数</title>
<script type="text/javascript" src="js/jQuery.min.js" charset="utf-8"></script>
<link rel="style/sheet" type="text/css" href="css/style.css"/>
<script type="text/javascript">
$(function(){
//设置淡出率
$("img").each(function(){
$(this).on("mouseover",function(){
$(this).fadeOut(200,function(){
$(this).fadeIn(200);
});
});
});
});
</script>
</head>
<body>
<div id="myDiv">
<img src="images/gd.jpg" width="100px"/>
<img src="images/gd.jpg" width="100px"/>
<img src="images/gd.jpg" width="100px"/>
<img src="images/gd.jpg" width="100px"/>
<img src="images/gd.jpg" width="100px"/>
</div>
</body>
</html>
关于jQuery怎么实现淡入于淡出动画效果就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
