jquery动画

最新推荐文章于 2020-05-21 17:42:49 发布

seven-yang

最新推荐文章于 2020-05-21 17:42:49 发布

阅读量298

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/yangyixue123/article/details/75500557

jquery动画

一、基本动画形式

1.show()显示效果

语法：show(speed,callback)

speend：可选，为动画执行时间，单位为毫秒。也可以为“slow”,”normal”,”fast”　
callback：可选,为当动画完成时执行的函数。

2、hide()隐藏效果

　语法:hide(speed,callback)　

<body>
<p id="text">This is a example</p>
<input type="button" class="btn1" value="Hide">
<input type="button" class="btn2" value="Show">
<script src="jquery.min.js"></script>
<script src="velocity.min.js"></script>
<script src="velocity.ui.min.js"></script>
<script>
    $(document).ready(function(){
        $(".btn1").click(function(){
            $("p").hide(1000);
        });
        $(".btn2").click(function(){
            $("p").show(1000,showColor);
            $("p").css("background-color","red");
        });
    });
    function showColor(){
        $("p").css("background-color","green");
    }
</script>
</body>

3、toggle()

toggle()隐藏显示自动切换，当目前为显示则隐藏，当目前为隐藏则显示

switch :可选。布尔值。规定 toggle 是否隐藏或显示所有被选元素。

* True - 显示所有元素
* False - 隐藏所有元素
* 如果设置此参数，则无法使用 speed 和 callback 参数。

语法：toggle(speed,callback,switch)　
　　　　
　　

<body>
<p>This is a example</p>
<p style="display: none">This is a example2</p>
<input type="button" value="p显示" class="btn1">
<p class="p1">This is a example3</p>
<input type="button" value="toggle" class="btn2">
<script src="jquery.min.js"></script>
<script src="velocity.min.js"></script>
<script src="velocity.ui.min.js"></script>
<script>
$(document).ready(function(){
    $(".btn1").click(function(){
        $("p").toggle(true);
    });
});
$(document).ready(function(){
    $(".btn2").click(function(){
        $(".p1").toggle(1000);
    });
});
</script>
</body>

4、slideDown()

slideDown():向下显示。 slow()是水平与垂直方向同时展开，而slideDown是仅仅在垂直方向向下展开

easing 可选。规定在动画的不同点上元素的速度。默认值为 “swing”。

可能的值：

“swing” - 在开头/结尾移动慢，在中间移动快
“linear” - 匀速移动

语法:slideDown(speed,easing,callback)

5、slideUp()

slideUp():向上隐藏,　　hide()是水平与垂直两个方向的，而slideUp()仅仅是垂直方向向上收起隐藏

　　语法:slideUp(speed,callback)

<body>
<p>This is a example</p>
<input type="button" class="btn1" value="slideUp">
<input type="button" class="btn2" value="slideDown">
<script src="jquery.min.js"></script>
<script src="velocity.min.js"></script>
<script src="velocity.ui.min.js"></script>
<script>
 $(document).ready(function(){
     $(".btn1").click(function(){
         $("p").slideUp(1000,function(){
             alert("slideUp()方法已完成");
         });
     });
     $(".btn2").click(function(){
         $("p").slideDown(1000,function(){
             alert("slideDown()方法已完成");
         });
     });
 });
</script>
</body>

6、slideToggle

垂直方向上切换,toggle是水平与垂直两个方向上的，而slideToggle是仅仅垂直方向的。

语法:slideToggle(speed,callback)
　　　　

7、fadeIn()

以改变透明度来显示

　　语法：fadeIn(speed,callback)　　　
　　
　　$(“#div1”).FadeIn(3000,function(){ alert(“淡入显示成功!”); });

8、fadeOut()

以改变透明度来隐藏

　　语法：fadeOut(speed,callback)　　
　　

<body>
<p>This is a paragraph</p>
<input type="button" value="hide" class="btn1">
<input type="button" value="show" class="btn2">
<script src="jquery.min.js"></script>
<script src="velocity.min.js"></script>
<script src="velocity.ui.min.js"></script>
<script>
    $(document).ready(function(){
        $(".btn1").click(function(){
            $("p").fadeOut(1000);
        });
        $(".btn2").click(function(){
            $("p").fadeIn(1000);
        });
    });
</script>
</body>

9、animate()

自定义动画，一般来说数字变动都可以用于动画。

语法：animate(style,speed,easing,callback);　　样式参数，时间，可选择，函数

styles 必需。规定产生动画效果的 CSS 样式和值。
speed 可选。规定动画的速度。默认是 “normal”。
easing 可选。规定在不同的动画点中设置动画速度的 easing 函数。
callback 可选。animate 函数执行完之后，要执行的函数。

<body>
<div id="box" style="background-color: yellowgreen"></div>
<button class="btn1">animate</button>
<button class="btn2">reset</button>

<script src="jquery.min.js"></script>
<script src="velocity.min.js"></script>
<script src="velocity.ui.min.js"></script>
<script>
    $(document).ready(function(){
        $(".btn1").click(function(){
            $("#box").animate({
                height:"300px"
            });
        });
        $(".btn2").click(function(){
            $("#box").animate({
                height:"100px"
            });
        });
    });
</script>
</body>

9、stop()

停止正在执行动画

stop([clearQueue],[gotoEnd]);　　两个参数均为布尔值，

第一个表示，是否停止动画执行
第二个表示，如果停止，是否立即变为执行完成的状态，如果设置为否，则停留在执行一半的状态。

　　$(“#div1”).hide(5000)　　//此动画正在执行

　　$(“#div1”).stop();　　　　//上一行代码指定的动画停止在一半状态

　　$(“#div1”).stop(true,true);　　//停止当前动画，同时动画切换到完成执行状态。

<body>
<p><button id="start">Start Animation</button><button id="stop">Stop Animation</button></p>

<div id="box" style="background:#98bf21;height:100px;width:100px;position:relative">
</div>

<script src="jquery.min.js"></script>
<script src="velocity.min.js"></script>
<script src="velocity.ui.min.js"></script>
<script>
    $(document).ready(function(){
        $("#start").click(function(){
            $("#box").animate({height:300},"slow");
            $("#box").animate({width:300},"slow");
            $("#box").animate({height:100},"slow");
            $("#box").animate({width:100},"slow");
        });
        $("#stop").click(function(){
            $("#box").stop(true);
        });
    });
</script>
</body>