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淡入于淡出动画效果实现的全部介绍，希望大家可以有所收获，更多jquery视频教程请关注。
以上就是jquery淡入于淡出动画效果实现的详细内容。