Jquery内置动画

最新推荐文章于 2024-05-07 19:24:40 发布

ICY___

最新推荐文章于 2024-05-07 19:24:40 发布

阅读量226

点赞数

分类专栏： ICY___的Jquery入门文章标签： jquery动画

本文链接：https://blog.csdn.net/ICY___/article/details/87923335

版权

JQuery 同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

ICY___的Jquery入门

9 篇文章 0 订阅

订阅专栏

在Jquery的世界里，动画是怎样执行的呢？和css3相比，又有那些不同和优势呢？相信看完这篇博客后，你就会明白。

我在想我究竟用什么方式才能更好的表达出我的想法，所以，今天做新的尝试，将代码和知识点重写样式，貌似更加直接明了吧。

固定动画

show() 显示 hide() 隐藏参数1 动画的时间参数2 回调函数（动画完成可选项，下同）
toggle show()和hide()的结合版那个没有执行那个

滑动效果

slideUp() 上滑 slideDown() 滑下参数1 动画的时间参数2 回调函数（动画完成）
slidetoggle() 结合版，类似于toggle()，那个没有执行就执行那个

按入淡出动画

fadeOut() 淡出 fadeIn() 淡入参数1动画的时间参数2 回调函数（动画完成）
fadeToggle() 结合版作用同上（其实是很好记的，一种动画有三种方式，单一两种互补，一种结合版）

透明度变化

fadeTo() 参数1 动画的时间参数2 不透度变化后的值（0—1）参数3 回调函数（动画完成）

自定义动画

自定义动画 delay() 动画的延迟 stop 停止正在运行的动画（不影响下一步动画）
animate（）参数1 需要改变的效果参数2 动画时间参数3 执行方式或执行的风格（没有什么作用，并不能像css3那样有效比如ease ease-in 等）参数4 回调函数（动画完成）

练习源代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .block {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>
<body>
<button id="btn">按钮</button>
<button id="btn1">按钮</button>
<div class="block"></div>
<button id="start">开始</button>
<button id="stop">暂停</button>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
    //jquery里面的固定动画
    /*show()  hide()  
    /*$("#btn").click(function (){
     $(".block").hide(1000,function (){
     alert(1)
     });
     });
     $("#btn1").click(function (){
     $(".block").show(1000,function (){
     alert(2)
     });
     });*/
    /*toggle()  show 和 hide 结合版*/
    /*$("#btn").click(function () {
     $(".block").toggle(1000,function (){
     alert(2)
     });
     });*/
    /*滑动效果*/
    /* $("#btn").click(function (){
     /!* $(".block").slideUp();//上滑*!/
     $(".block").slideDown();//下滑
     });*/
    /*$("#btn1").click(function (){
     /!* $(".block").slideUp();//上滑*!/
     /!* $(".block").slideUp();//下滑*!/
     $(".block").slideToggle(2000,function (){
     alert(1);
     });
     });*/
    /*淡入淡出的动画*/
    /*$("#btn").click(function (){
     /!* $(".block").fadeOut(500);*!/
     $(".block").fadeToggle(500);
     });*/
    /* $("#btn1").click(function (){
     $(".block").fadeIn(500);
     });*/
    /*透明度变化动画*/
    /*$("#btn").click(function (){
     /!* $(".block").fadeOut(500);*!/
     $(".block").fadeTo(当前,0.5,function (){
     alert(1)
     });
     });*/

    //自定义动画   delay()  动画的延迟  stop  停止当前正在运行的动画
    $("#start").click(function () {
        $(".block").delay(1000).animate({
            marginLeft: "700px",
            opacity: 0
        }, 1000, function () {
            //完成
        }).delay(1000).animate({
            marginLeft: "0px",
            opacity: 1
        }, 1000);
    });
    $("#stop").click(function () {
        $(".block").stop();
    });
</script>
</body>
</html>

ICY___

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Jquery内置动画

在Jquery的世界里，动画是怎样执行的呢？和css3相比，又有那些不同和优势呢？相信看完这篇博客后，你就会明白。我在想我究竟用什么方式才能更好的表达出我的想法，所以，今天做新的尝试，将代码和知识点重写样式，貌似更加直接明了吧。固定动画 show() 显示 hide() 隐藏参数1 动画的时间参数2 回调函数（动画完成可选项，下同） ...
复制链接

扫一扫