jQuery动画

<style>

        div{

            width: 200px;

            height: 200px;

            background-color: rgb(65, 135, 226);

        }

</style>

先输出一个div正方形

 

1.行内样式 改变display的值 

隐藏 display:none  显示 display:原始值   如果没有原始值，则删除display样式

$("div").show(1000); 带动画的路线  左上角<->右下角

   show()显示 从左上角->右下角

   hide()隐藏  从右上角->左下角

           $(".show").click(function(){
                //$("div").show("slow"); //normal正常 fast快 slow慢
                $("div").show(1000);
            });
            $(".hide").click(function(){
                $("div").hide();
            });
            $(".toggle").click(function(){
                $("div").toggle();
            });

    <button class="show">show</button>
    <button class="hide">hide</button>
    <button class="toggle">toggle</button>

 

2.行内样式 通过heigh控制，改变height的值

动画路线 上<->下 

slideDown()   通过高度变化（向下增大）来动态地显示所有匹配的元素

slideUp()  通过高度变化（向上减小）来动态地隐藏所有匹配的元素

slideToggle()  通过高度变化来切换所有匹配元素的可见性

            $(".slideDown").click(function(){
                $("div").slideDown("fast");
            });
            $(".slideUp").click(function(){
                $("div").slideUp();
            });
            $(".slideToggle").click(function(){
                //$("div").stop().slideToggle(3000); //删除所有排队的动画，在最后一次的动画基础上，继续新动画,解决动画延迟的问题
                $("div").finish().slideToggle(3000); //删除所有排队的动画，完成所有动画，开始新动画
            });

    <button class="slideDown">slideDown</button>
    <button class="slideUp">slideUp</button>
    <button class="slideToggle">slideToggle</button>

3.淡入淡出 行内样式 opacity 0<->1

fadeIn()  通过不透明度的变化来实现所有匹配元素的淡入效果

fadeOut()  通过不透明度的变化来实现所有匹配元素的淡出效果

fadeToggle()  通过不透明度的变化来开关所有匹配元素的淡入和淡出效果

fadeTo()   把所有匹配元素的不透明度以渐进方式调整到指定的不透明度

            $(".fadeIn").click(function(){
                $("div").fadeIn();
            });
            $(".fadeOut").click(function(){
                $("div").fadeOut(3000);
            });
            $(".fadeToggle").click(function(){
                $("div").fadeToggle();
            });
            $(".fadeTo").click(function(){
                $("div").fadeTo("normal",0.3);
                //fadeTo(时间,透明度)第一个必须要写
            });

    <button class="fadeIn">fadeIn</button>
    <button class="fadeOut">fadeOut</button>
    <button class="fadeToggle">fadeToggle</button>
    <button class="fadeTo">fadeTo</button>

4. animate  用于创建自定义动画的函数。

            $(".animate").click(function(){
                // $("div").animate({width:"400px"},1000);
                $("div").animate({width:"+=160px",height:"+=160px"},500);
            });

    <button class="animate">animate</button>