今天和大家分享一下用?animate 實現滑動切換效果的小例子 -------?來自<一只有夢想的前端小白>
?
大家都知道jQuery 提供的有一下幾種方法能夠實現滑動效果:
- slideDown()
- slideUp()
- slideToggle()
但是以上的滑動不太方便控制其滑動的方向,所以我們還是自己動手寫一個吧。。。
其代碼如下:
<!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>
?
?
以上代碼即可以實現一個完整的滑動效果。但是有一點需要注意,
?
?
如上圖所示,需要加上 stop() 事件 ,防止鼠標快速移動時產生的多個事件,形成一個棧隊,造成鼠標移除后依舊滑動甚至閃動的效果。
?
希望以上的介紹對您能有所幫助,同時這也是我自己只是內化的過程,感謝博客園平臺!----來自<一只有夢想的前端小白>