淡入与淡出

hide()和show()函数的动画都在不断的改变着大小,实际上这种做法非常的混乱,所以我们此时最好的做法是可以进行淡入与淡出的效果

淡入操作:fadeIn(时间,function(){})

淡出操作:fadeOut(事件,function(){})

自己设置淡出操作fadeTo(事件,淡出率,function(){}),淡出率不超过1

淡出操作

<meta><title>jQuery的动画函数</title><script></script><link><script>
$(function(){
//设置层淡出操作
$(myimg).fadeOut(5000,function(){
$(this).fadeIn(5000)
});
});
</script><div>
@@##@@
</div>

使用fadeTo（）观察淡出率问题

$(function(){
//设置淡出率
$(myimg).fadeTo(5000,0.3,function(){});
});

如果设置为0表示完全淡出，如果设置为1,表示不单出。

jQuery 1.12.4

jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。

下载

如果已经懂得了淡入于淡出的操作，可以实现一排按钮

利用淡入于淡出实现菜单的功能

<meta><title>jQuery的动画函数</title><script></script><link><script>
$(function(){
//设置淡出率
$("img").each(function(){
$(this).on("mouseover",function(){
$(this).fadeOut(200,function(){
$(this).fadeIn(200);
});
});
});
});
</script><div>
@@##@@
@@##@@
@@##@@
@@##@@
@@##@@
</div>

以上的三组函数成型的函数。

以上就是对jQuery淡入于淡出动画效果实现的全部介绍，希望大家可以有所收获，更多jQuery视频教程请关注PHP中文网。