jQuery动画

jquery动画

拓展 ： $(‘.artList  :eq(2)’)这是一个后代选择器index从0 开始

      选出来的是.artList的第三个子元素

      $(‘.artList:eq(2)’)选出来的是第三个.artList元素

 

动画效果show() 和 hide()

Show(speed,[callback])   hide(speed,[callback])

方法中的speed 表示执行动画时的速度，有三个默认值 slow 、normal、fast

对应的速度分别是  0.6   0.4   0.2秒。也可以直接输入数字eg: 3000 表示3000毫秒 

[callback]为动画完成时执行的回调函数，该函数每个元素执行一次

Eg :   $(function(){

                var link = $('.list a');

                var hide = $('.list :eq(2)');

                link.click(function(){

                         if($(this).html() == '显示'){

                                  $(this).html('隐藏');

                                  hide.show();

                         }else{

                                  $(this).html('显示');

                                  hide.hide();

                         }

                         //console.log(hide,link,this);

                         //hide 和 link 为jQuery对象，this是一个a标签的DOM对象

                })

        })

 

 

toggle()方法

 1.toggle()  无参数

 2.(有逻辑参数)toggle(switch) switch 是一个布尔值，当值为true显示元素，false隐藏元素

 3.(动画效果)toggle(speed,[callback]);

无论是show() 和hide()还是toggle(),当以动画切换页面元素可见状态是，

其元素的width、height、padding、margin属性都将以动画效果展示

 

slideDown(speed,[callback])和slideUp(speed,[callback]);

slideDown(speed,[callback]) 将选择元素的高度向下增大

slideUp(speed,[callback])  将选择元素的高度向上减小

slideToggle(speed,[callback])  根据显示状态自动切换

 

淡入淡出 fadeIn(speed,[callback])与fadeOut(speed,[callback])

http://jquery.cuishifeng.cn/fadeIn.html

http://jquery.cuishifeng.cn/fadeOut.html

 

fadeTo(speed,opacity,[callback])方法

把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数。

这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。

<div class="divFrame">

            <div class="Title">

                   <select name="" id="">

                          <option value="0.2">0.2</option>

                          <option value="0.4">0.4</option>

                          <option value="0.6">0.6</option>

                          <option value="0.8">0.8</option>

                          <option value="1.0" selected="selected">1.0</option>

                   </select>

            </div>

            <div class="divContent"><img src="img/2.jpg" alt="monkey"></div>

     </div>

$(function(){

            var img = $('img');

            var sel = $('select');

            sel.click(function(){

                   var flt = $(this).val();//这里的值就相当于this.value的值

                   img.fadeTo(3000,flt);

                   // console.log(this.value);//只有jQuery对象才有val()方法

                   // console.log(this);//要想调用val()方法必须把this包装成jQuery对象

            })

     })

 

自定义动画

简单动画

animate(params , [duration] , [easing] , [callback])

params:一组包含作为动画属性和终值的样式属性和及其值的集合

speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)

easing:要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 "swing".

callback:在动画完成时执行的函数，每个元素执行一次。

注意：所有指定的属性必须用骆驼形式，比如用marginLeft代替margin-left.