這篇文章運用簡單易懂的例子給大家介紹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進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
