animate 实现滑动切换效果
生活随笔
收集整理的這篇文章主要介紹了
animate 实现滑动切换效果
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
今天和大家分享一下用?animate 實(shí)現(xiàn)滑動(dòng)切換效果的小例子 -------?來自<一只有夢(mèng)想的前端小白>
?
大家都知道jQuery 提供的有一下幾種方法能夠?qū)崿F(xiàn)滑動(dòng)效果：
但是以上的滑動(dòng)不太方便控制其滑動(dòng)的方向，所以我們還是自己動(dòng)手寫一個(gè)吧。。。
其代碼如下：
<!DOCTYPE html> <html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>Examples</title><meta name="description" content=""><meta name="keywords" content=""><style type="text/css">body{width: 100%;height: auto;}.content{width: 150px;height: 50px;position: absolute;top: 20px;left: 20px;overflow: hidden;background-color: red;}.slide-box{width: 300px;position: relative;overflow: hidden;}.slide1{width: 150px;height: 50px;float: left;display: inline-block;line-height: 50px;text-align: center;background-color: #BDD8CF;}.slide2{width: 150px;height: 50px;float: right;display: inline-block;line-height: 50px;text-align: center;background-color: #C1C4C4;}</style></head><body><div class="content"><div class="slide-box"><span class="slide1">左邊的元素</span><span class="slide2">右邊的元素</span></div></div><script src="js/jquery-1.11.2.min.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$(function(){$(".content").hover(function(){$(".slide-box").stop(true).animate({right:"150px"},'slow');},function(){$(".slide-box").stop(true).animate({right:"0"},'slow');});})</script></body> </html>?
?
以上代碼即可以實(shí)現(xiàn)一個(gè)完整的滑動(dòng)效果。但是有一點(diǎn)需要注意，
?
?
如上圖所示，需要加上 stop() 事件 ，防止鼠標(biāo)快速移動(dòng)時(shí)產(chǎn)生的多個(gè)事件，形成一個(gè)棧隊(duì)，造成鼠標(biāo)移除后依舊滑動(dòng)甚至閃動(dòng)的效果。
?
希望以上的介紹對(duì)您能有所幫助，同時(shí)這也是我自己只是內(nèi)化的過程，感謝博客園平臺(tái)！----來自<一只有夢(mèng)想的前端小白>
轉(zhuǎn)載于:https://www.cnblogs.com/Lily-nercel/p/5461201.html
總結(jié)
以上是生活随笔為你收集整理的animate 实现滑动切换效果的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Win7启动修复MBR（Win7+Lin
- 下一篇： 快手视频伪原创 电脑视频md5修改器