animate 實(shí)現(xiàn)滑動(dòng)切換效果【實(shí)例代碼】
更新時(shí)間：2016年05月05日 16:41:01 投稿：jingxian
下面小編就為大家?guī)?lái)一篇animate 實(shí)現(xiàn)滑動(dòng)切換效果【實(shí)例代碼】。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
今天和大家分享一下用 animate 實(shí)現(xiàn)滑動(dòng)切換效果的小例子
大家都知道jQuery 提供的有一下幾種方法能夠?qū)崿F(xiàn)滑動(dòng)效果：
1.slideDown()
2.slideUp()
3.slideToggle()
但是以上的滑動(dòng)不太方便控制其滑動(dòng)的方向，所以我們還是自己動(dòng)手寫(xiě)一個(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;
}
.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 clearfix">
<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)的效果。
以上這篇animate 實(shí)現(xiàn)滑動(dòng)切換效果【實(shí)例代碼】就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
jQuery簡(jiǎn)單實(shí)現(xiàn)MD5加密的方法
這篇文章主要介紹了jQuery簡(jiǎn)單實(shí)現(xiàn)MD5加密的方法,基于jquery.md5.js插件實(shí)現(xiàn)md5加密功能,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2017-03-03
jQuery live( type, fn ) 委派事件實(shí)現(xiàn)
jQuery 1.3中新增的方法。給所有當(dāng)前以及將來(lái)會(huì)匹配的元素綁定一個(gè)事件處理函數(shù)（比如click事件）。也能綁定自定義事件。2009-10-10
本文主要介紹了獲取jqGrid中選擇的行的數(shù)據(jù)的語(yǔ)法和獲取簡(jiǎn)例，需要的朋友可以看下2016-11-11
這篇文章主要介紹了jQuery屬性選擇器用法,結(jié)合實(shí)例形式分析了jQuery中針對(duì)屬性的判斷與匹配相關(guān)操作技巧,需要的朋友可以參考下2016-09-09
jQuery Validation Plugin驗(yàn)證插件手動(dòng)驗(yàn)證
jquery.validate是jquery旗下的一個(gè)驗(yàn)證框架，借助jquery的優(yōu)勢(shì)，我們可以迅速驗(yàn)證一些常見(jiàn)的輸入,并且可以自己擴(kuò)充自己的驗(yàn)證方法，并且對(duì)國(guó)際化也有很好的支持，接下來(lái)通過(guò)本文給大家介紹jQuery Validation Plugin驗(yàn)證插件手動(dòng)驗(yàn)證2016-01-01
jQuery中的一些常見(jiàn)方法小結(jié)(推薦)
下面小編就為大家?guī)?lái)一篇jQuery中的一些常見(jiàn)方法小結(jié)(推薦)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-06
下面小編就為大家?guī)?lái)一篇JQuery 獲取Dom元素的實(shí)例講解。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07
用jQuery獲取IE9下拉框默認(rèn)值問(wèn)題探討
本文與大家詳細(xì)探討下用jQuery獲取IE9下拉框默認(rèn)值的問(wèn)題,如果下拉框沒(méi)有空默認(rèn)值會(huì)怎么樣等一系列問(wèn)題，感興趣的朋友可以參考下哈，希望對(duì)大家有所幫助2013-07-07
使用jquery插件實(shí)現(xiàn)等寬輸出文字，具體的調(diào)用及實(shí)現(xiàn)如下，感興趣的朋友可以參考下，希望對(duì)大家有所幫助2013-09-09
jQuery中對(duì)未來(lái)的元素綁定事件用bind、live or on
這篇文章主要介紹了jQuery中對(duì)未來(lái)的元素綁定事件用bind、live or on,需要的朋友可以參考下2014-04-04