Rumah > hujung hadapan web > tutorial js > jQuery淡入于淡出动画效果实现

jQuery淡入于淡出动画效果实现

云罗郡主
Lepaskan: 2019-01-21 10:10:36
ke hadapan
2750 orang telah melayarinya

淡入与淡出

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>
Salin selepas log masuk

使用fadeTo()观察淡出率问题

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

jQuery淡入于淡出动画效果实现

如果设置为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>
Salin selepas log masuk

jQuery淡入于淡出动画效果实现

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

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


Atas ialah kandungan terperinci jQuery淡入于淡出动画效果实现. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:csdn.net
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan