9.jQuery动画切换效果

1.显示隐藏切换
    show()  hide()  toggle()        
2.滑动
    slideDown()  slideUp()  slideToggle()
3.淡入淡出
    fadeln()  fadeOut()  fadeToggle()切换  
    fadeTo("speed","opacity","easing",fn)透明度,其中速度和透明度必须写      

    *显示语法规范
      show(["speed","easing",fn]) 参数都可以省略,无动画直接显示
        ①speed:三种预定速度之一的字符串("slow","normal","fast")或表示动画时长的毫秒数值
        ②easing:(Optional)用来指定切换效果,默认是"swing","linear"
        ③fn:回调函数,在动画完成时执行函数,每个元素执行一次

        注:fadeTo多一个参数:opacity:取值 0~1

4.自定义动画
    animate(params,speed,easing,fn)
        参数
        ①params:想要更改的样式属性,以对象形式传递,必须写.属性名可以不用带引号,如果是复合属性则需要采取驼峰命名法,其余参数可省略
        ②speed:三种预定速度之一的字符串("slow","normal","fast")或表示动画时长的毫秒数值
        ③easing:(Optional)用来指定切换效果,默认是"swing","linear"
        ④fn:回调函数,在动画完成时执行函数,每个元素执行一次
        
5.动画或效果队列
    ①.动画或效果队列
        动画或者效果一旦触发就会执行,如果多次触发,就造成多个动画或效果排队执行
    ②.停止排队stop()
        注:stop()写到动画或者效果的前面,相当于停止上一次的动画

代码示例

1.显示隐藏

    <script src="jQuery.js"></script>
    <script>
        $(function(){
            $("button").eq(1).click(function(){
                $("div").hide("slow","linear",function(){
                    alert("隐藏");
                });
            })
            $("button").eq(0).click(function(){
                $("div").show("slow","linear",function(){
                    alert("显示");
                });
            })
            $("button").eq(2).click(function(){
                $("div").toggle("slow","linear",function(){
                    alert("切换");
                });
            }) 


        })
    </script>

2.滑动

    <script src="jQuery.js"></script>
    <script>
    $(function(){
        //下拉滑动
        $("button").eq(0).click(function(){  
            $("div").stop().slideDown();
        })
        //上拉滑动
        $("button").eq(1).click(function(){  
            $("div").stop().slideUp(500);
        })
        //切换滑动
        $("button").eq(2).click(function(){  
            $("div").stop().slideToggle();
        })

    })

    </script>

3.淡入淡出

    <script src="jQuery.js"></script>
    <script>
        $(function(){
            $("button").eq(0).click(function(){
                $("div").fadeIn(1000);  //淡入
            })
            $("button").eq(1).click(function(){
                $("div").fadeOut(1000);  //淡出
            })
            $("button").eq(2).click(function(){
                $("div").fadeToggle();  //切换
            })

            $("button").eq(3).click(function(){
                $("div").fadeTo(1000,0.5);  //透明度,其中速度和透明度必须写
            })            
        })
    </script>

4.自定义动画

    <script src="jQuery.js"></script>
    <script>
        $(function(){
            $("button").click(function(){
                $("div").animate({
                    left:500,
                    top:300,
                    opacity:.4,
                    width:700,
                },1000)
            })
        })
    </script>