jQuery——stop
生活随笔
收集整理的這篇文章主要介紹了
jQuery——stop
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
為什么要停止動畫?
對同一個元素,如果擁有一個以上的動畫對其加以作用,那么后面的動畫會被放入一個動畫隊列中。動畫隊列的動畫是在其上一個動畫完成以后才會執行。
控制兩個參數四種情況
1、第一個參數表示后續動畫是否要執行:true:后續動畫不執行 ;false:后續動畫會執行
2、第二個參數表示當前動畫是否執行完:true:立即執行完成當前動畫 ;false:立即停止當前動畫
(1)、stop(true,true)后續動畫不執行,立即執行完成當前動畫
(2)、stop(false,true)后續動畫會執行,立即執行完成當前動畫
(3)、stop(true,false)后續動畫不執行,立即停止當前動畫
(4)、stop(false,false)后續動畫會執行,立即停止當前動畫
我們經常用的是第四種情況stop(false,false)后續動畫會執行,立即停止當前動畫,默認stop()===stop(false,false)
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>* {padding: 0;margin: 0;}ul {list-style: none;}.nav {padding-left: 10px;width: 330px;height: 30px;margin: 10px auto;background: url("images/bg.jpg");}.nav li {background: url("images/libg.jpg");}.nav > ul > li {float: left;margin-right: 10px;position: relative;}a {display: block;width: 100px;height: 30px;text-align: center;font: 400 15px/30px "simsun";text-decoration: none;cursor: pointer;}.nav > ul > li > ul {position: absolute;top: 30px;display: none;}</style><script src="jquery-1.11.1.js"></script><script>$(function () {$(".nav>ul>li").mouseenter(function () {$(this).children("ul").stop(false, false).slideDown();});$(".nav>ul>li").mouseleave(function () {$(this).children("ul").stop(false, false).slideUp();});});</script> </head> <body> <div class="nav"><ul><li><a href="#">一級菜單</a><ul><li><a herf="#">二級菜單</a></li><li><a herf="#">二級菜單</a></li><li><a herf="#">二級菜單</a></li><li><a herf="#">二級菜單</a></li></ul></li><li><a href="#">一級菜單</a><ul><li><a herf="#">二級菜單</a></li><li><a herf="#">二級菜單</a></li><li><a herf="#">二級菜單</a></li><li><a herf="#">二級菜單</a></li></ul></li><li><a href="#">一級菜單</a><ul><li><a herf="#">二級菜單</a></li><li><a herf="#">二級菜單</a></li><li><a herf="#">二級菜單</a></li><li><a herf="#">二級菜單</a></li></ul></li></ul> </div> </body> </html>?
?
轉載于:https://www.cnblogs.com/wuqiuxue/p/8032320.html
總結
以上是生活随笔為你收集整理的jQuery——stop的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: java数值运算后精度丢失问题
- 下一篇: 洛谷1484 种树