jQuery-动画效果animate() slideDown() slideUp() fadeIn() fadeOut()

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qiqingjin/article/details/50526019

jQuery动画

以下JS代码公用的HTML:

 

<span style="font-size:14px;"><div class="control">

                   <buttontype="button" class="button"id="sp2">Show:Paragraph 2</button>

                   <buttontype="button" class="button"id="sp23">Show:Paragraph 2&3</button>

                   <buttontype="button" class="button"id="hp2">Hide:Paragraph 2</button>

                   <buttontype="button" class="button"id="hp23">Hide:Paragraph 2&3</button>

</div>

 

<div class="content">

                   <div><h3>Introduction</h3><p>Inaddition to being ……</p></div>

                   <div><h3>Howit works</h3><p>It turns out t……</p></div>

                   <div><h3>Howto get involved</h3><p>Visual Event is ……</p></div>

                   <div><h3>BuildingVisual Event</h3><p>In order to run a local copy ……</p></div>

</div></span>


1.      隐藏和显示元素

.hide()/.show()

使用.hide()/.show()会同时改变被选元素的高度、宽度和透明度,参数为duration(毫秒)或‘slow’/‘fast’,也可以不加参数,不加参数效果与display:none/block;效果一致。

例如:

<span style="font-size:14px;">$('.content div').eq(1).show(2000); //使第二段内容显示,动画持续时间为2秒</span>

2.      淡入和淡出

.fadeIn()/.fadeOut()

使用.fadeIn()/.fadeOut()会改变被选元素的透明度,参数为duration(毫秒)或‘slow’/‘fast’。

<span style="font-size:14px;">例如:$('.content div').eq(1).fadeIn('slow'); //使第二段内容显示,动画持续时间slow</span>


3.      滑上和滑下

.slideUp()/.slideDown()

使用.slideUp()/.slideDown()会使被选元素由页面上滑动出现或滑出页面,参数为duration(毫秒)或‘slow’/‘fast’。

<span style="font-size:14px;">例如:
$('.content div').eq(1).slideDown('slow'); //使得第二段内容由上滑动向下显示出来</span>

4.      切换可见性

.toggle()/.slideToggle()

.toggle()/.slideToggle()会在被选元素显示时隐藏元素,在隐藏时显示元素。不同之处是显示和隐藏元素时动画效果,.toggle()会同时改变元素的高度、宽度和透明度,而.slideToggle()则通过改变元素高度来完成动画。参数同上。

例如:

<span style="font-size:14px;">varsp2=$('#sp2');

 sp2.click(function(){

                             $('.contentdiv').eq(1).slideToggle('slow');

                    });</span>


5.      自定义动画

5.1   单一元素单一动画

.animate()

参数:

<span style="font-size:14px;">.animate({property1:’value1’,property2:’value2’……},

  duration,easing,function(){

            //callbackfunction

});

.animate({

            property1:‘value1’,

            property2:‘value2’

            ……

},{

            duration:‘value’,

            easing:‘value’,

            complete:function(){},

            queue:true/false,

            step:callback

});</span>


例如:

<span style="font-size:14px;">varsp2=$('#sp2');

  sp2.click(function(){

            $('.content div').eq(1).animate({height:'toggle'},'slow');

            });</span>

5.2   单一元素单多动画

5.2.1单一元素队列动画

通过对同一组元素连缀.animate()可以实现队列动画效果

例如:

<span style="font-size:14px;">var sp2=$('#sp2');

   sp2.click(function(){

          $('.contentdiv').eq(1).animate({height:'toggle'},'slow')

.animate({opacity:0.5},'slow');

             });</span>

5.2.2 单一元素同时动画

在.animate()里同时加入多个属性,动画同时发生

例如:

<span style="font-size:14px;">varsp2=$('#sp2');

   sp2.click(function(){

                     $('.content div').eq(1).animate({height:'toggle',opacity:0.5},'slow');

            });</span>

5.2.3 穿越队列

把.animate()的queue设为false

例如:

<span style="font-size:14px;">varsp2=$('#sp2');

   sp2.click(function(){

$('.contentdiv').eq(1).animate({height:'toggle'},'slow').animate({fontSize:'20px'},{

                                        duration:'slow',

                                        queue:false

                              }).animate({opacity:'0.5'},'slow');

                     });</span>

5.3   多元素多动画

5.3.1 多元素同时动画

当为不同元素增加动画时,这些动画几乎会同时发生。

例如:

<span style="font-size:14px;">varsp2=$('#sp2');

  sp2.click(function(){

  $('.contentdiv').eq(1).animate({height:'toggle'},'slow')

.animate({opacity:'0.5'},'slow');

  $('.contentdiv').eq(2).animate({height:'toggle'},'slow')

.animate({opacity:'0.5'},'slow');

}); //段落2和段落3的动画同时发生,两个段落都是先高度变化再透明度变化</span>

5.3.2 多元素队列动画

此时需要调用.animate()的回调函数

例如:

<span style="font-size:14px;">var sp2=$('#sp2');

             sp2.click(function(){

                     $('.contentdiv').eq(1).animate({height:'toggle'},'slow')

.animate({opacity:'0.5'},{duration:'slow',complete:function(){

                                        $('.contentdiv').eq(2).animate({height:'toggle'},'slow')

.animate({opacity:'0.5'},'slow');

                     }});

});</span>


阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页