animate-实现滑动切换效果.docVIP

下面小编就为大家带来一篇animate实现滑动切换效果【实例代码】。小编觉得挺不错的，现在分享给大家，也给大家做个参考。

今天和大家分享一下用animate实现滑动切换效果的小例子

大家都知道jQuery提供的有一下几种方法能够实现滑动效果：

1.slideDown()

2.slideUp()

3.slideToggle()

但是以上的滑动不太方便控制其滑动的方向，所以我们还是自己动手写一个吧。。。

其代码如下：

lt;!DOCTYPEhtmlgt;

lt;htmlgt;

nbsp;lt;headgt;

nbsp;nbsp;lt;metacharset=utf-8gt;

nbsp;nbsp;lt;metahttp-equiv=X-UA-Compatiblecontent=IE=edge,chrome=1gt;

nbsp;nbsp;lt;titlegt;Exampleslt;/titlegt;

nbsp;nbsp;lt;metaname=descriptioncontent=gt;

nbsp;nbsp;lt;metaname=keywordscontent=gt;

nbsp;nbsp;lt;styletype=text/cssgt;

nbsp;nbsp;nbsp;body{

nbsp;nbsp;nbsp;nbsp;width:100%;

nbsp;nbsp;nbsp;nbsp;height:auto;

nbsp;nbsp;nbsp;}

nbsp;nbsp;nbsp;.content{

nbsp;nbsp;nbsp;nbsp;width:150px;

nbsp;nbsp;nbsp;nbsp;height:50px;

nbsp;nbsp;nbsp;nbsp;position:absolute;

nbsp;nbsp;nbsp;nbsp;top:20px;

nbsp;nbsp;nbsp;nbsp;left:20px;

nbsp;nbsp;nbsp;nbsp;overflow:hidden;

nbsp;nbsp;nbsp;nbsp;background-color:red;

nbsp;nbsp;nbsp;}

nbsp;nbsp;nbsp;.slide-box{

nbsp;nbsp;nbsp;nbsp;width:300px;

nbsp;nbsp;nbsp;nbsp;position:relative;

nbsp;nbsp;nbsp;}

nbsp;nbsp;nbsp;.slide1{

nbsp;nbsp;nbsp;nbsp;width:150px;

nbsp;nbsp;nbsp;nbsp;height:50px;

nbsp;nbsp;nbsp;nbsp;float:left;

nbsp;nbsp;nbsp;nbsp;display:inline-block;

nbsp;nbsp;nbsp;nbsp;line-height:50px;

nbsp;nbsp;nbsp;nbsp;text-align:center;

nbsp;nbsp;nbsp;nbsp;background-color:#BDD8CF;

nbsp;nbsp;nbsp;}

nbsp;nbsp;nbsp;.slide2{

nbsp;nbsp;nbsp;nbsp;width:150px;

nbsp;nbsp;nbsp;nbsp;height:50px;

nbsp;nbsp;nbsp;nbsp;float:right;

nbsp;nbsp;nbsp;nbsp;display:inline-block;

nbsp;nbsp;nbsp;nbsp;line-height:50px;

nbsp;nbsp;nbsp;nbsp;text-align:center;

nbsp;nbsp;nbsp;nbsp;background-color:#C1C4C4;

nbsp;nbsp;nbsp;}

nbsp;nbsp;lt;/stylegt;

nbsp;lt;/headgt;

nbsp;lt;bodygt;

nbsp;n