jQuery动画详解

最新推荐文章于 2020-06-18 20:52:58 发布
最新推荐文章于 2020-06-18 20:52:58 发布
阅读量376 收藏
点赞数
分类专栏： jQuery 文章标签： jQuery动画
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sun13921881708/article/details/76170749
版权

jQuery动画

1.显示和隐藏  hide()和show（）
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ipone秒表</title>
    <style type="text/css">
​
    </style>
    <script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
</head>
<body>
<input type="button" value="hide">
<input type="button" value="show">
<p>点击按妞</p>
<div><em>显示和隐藏hide()和show()动画</em></div>
<img src="http://img.tongji.linezing.com/3455448/tongji.gif"/>
​
<script language="JavaScript">
    //无参
$(function () {
    $("input:first").click(function () {
        $("p").hide();//隐藏
​
    });
    $("input:last").click(function () {
        $("p").show();//显示
    })
​
})
//带参，传的参数可以控制显示和隐藏的过程
    show(duration,[callback]);
hide(duration,[callback]);
//duration表示动画执行时间的长短，可以表示速度的字符串，包括slow,normal,fast表示时间的整数（毫秒）
    //callback：表示回调函数，一般在动画完成之后才执行
    $(function () {
        $("input:first").click(function () {
            $("p").hide(300);//隐藏
        });
        $("input:first").click(function () {
            $("p").show(300);//显示
        })
    })
​
//2使用fadeIn()和fadeOut()
对于动画的效果隐藏和显示，jQuery提供这两种方法，其效果类似褪色，语法和show和hide一样
    fadeIn(duration,[callback]);
    fadeOut(duration,[callback]);
$(function () {
    $("input:eq(0)").click(function () {
        $("img").fadeOut(3000);//逐渐fandeOut
​
​
    });
    $("input:eq(0)").click(function () {
        $("img").fadeIn(3000);//逐渐fandeIn
​
​
    });
​
​
​
})
//3.fadeTo():表示将被选的元素的不透明度逐渐的改变成为指定的值
    $(function () {
        $("input:eq(0)").click(function () {
            $("img").fadeIn(1000);
​
        });
$("input:eq(2)").click(function () {
    $("img").fadeTo(1000,0.5);
})
​
​
​
    })
//4.幻灯片效果：sildeUp和sildeDown
​
    $(function () {
        $("input:eq(0)").click(function () {
            $("div").add("img").sildeUp(1000);
​
​
        });
        $("input:eq(1)").click(function () {
            $("div").add("img").sildeDown(1000);
​
​
        })
        $("input:eq(2)").click(function () {
            $("div").add("img").hide(1000);
        });
        $("input:eq(3)").click(function () {
            $("div").add("img").show(1000);
        })
    })
​
</script>
​
</body>
</html>

自定义动画


概述：考虑到框架的通用性和代码文件的大小，jQuery不能覆盖所有的动画，提供了animate()方法，可以使开发者自定义动画
​
animate()一共有两种形式：
  用法如下：
    animate(params,[duration],[easing],[callback]);
    params:表示为希望进行变换的css属性列表，以及希望变化到的最终值
    duration：为可选项，表示动画的持续时间
    easing：可选参数《通常供动画的插件使用，用来控制节奏的变化过程，在jQuery值提供两个值：linear和swing
    callback：表示回调函数，在动画完成之后触发
    
    注意：
       params中的变量遵循camel命名方式，params只能是css中数值表示的属性：如width,top,opacity
       
    
    
    <!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ipone秒表</title>
    <style type="text/css">
#box{
    width: 100px;
    height: 100px;
    background-color: red;
    position: absolute;
}
#pox{
    width: 100px;
    height: 100px;
    background-color: green;
    position: absolute;
    top: 200px;
}
​
​
​
    </style>
    <script language="JavaScript" src="../js/jquery-1.4.2.js"></script>
</head>
<body>
<input type="button" class="button" value="开始"/>
<input type="button" class="stop" value="停止"/>
<input type="button" class="animal" value="查找运动中的动画"/>
<div id="box">box</div>
<div id="pox">pox</div>
​
​
<script language="JavaScript">
$(function () {
    $(".button").animate({
        left:"300px"//注意：想要使用left,right,top,bottom这些方向性的属性，必须对#box元素设置css绝对定位
​
    })
​
})
//自定义动画中，每一次开始运动都必须是初始位置或者初始的状态，
// 而有时我们想通过当前位置或者状态下再进行动画，jQuery提供自定义动画的累加或累减功能
    $(".button").click(function () {
        $("#box").animate({
            left:"+=50px"//表示每点击一次，.button按钮#box元素就往左边移动50px；
        })
    })
//-------同步动画
    //一个css变化就是动画效果，如：
//      已经有四个css辩护（分别是：width，height，opacity，fontsize的变化）
//实现了多重动画同步运动的效果（多重同步运动的效果就是这四个css属性的值在同一时间，同时变化）
$(".button").click(function () {
    $("#box").animate({
        width:"300px",
        height:"200px",
        opacity:0.5,
        fontSize:"30px"
    })
})
​
//队列动画
    //通过回调函数实现队列动画
    //效果：首先#box的宽度设置为300px，高度设置为200px,透明度设置我50%,字体的大小150px,
    $(".button").click(function () {
        $("#box").animate({width:"300px"},1000,function () {
            $("#box").animate({height:"200px"},1000,function () {
                $("#box").animate({opacity:0.5},1000,function () {
                    $("#box").animate({fontSize:"150px"},1000,function () {
                        alert("完事")
                    });
                });
            });
        });
    })
//在同一个元素基础上，使用链式调用实现队列动画
    $(".button").click(function () {
    $("#box")
        .animate({width:"300px"},1000)
        .animate({height:"200px"},1000)
        .animate({opacity:0.5},1000)
        .animate({fontSize:"150px"},1000,function () {
            alert("队列动画执行完毕")
        })
})
//如果有多个元素就不能实现，两个元素的动画是同时执行，属于#box的那两段动画执行
        .animate({width:"300px"},1000)和 .animate({opacity:0.5},1000)，同时执行
    #pox 的动画.animate({height:"200px"},1000)和  .animate({fontSize:"150px"},1000
$(".button").click(function () {
    $("#box").animate({width:"300px"},1000);
    $("#pox").animate({height:"300px"},1000);
    $("#box").animate({opacity:0.5},1000);
    $("#pox").animate({fontSize:"150px"},1000);
})
//注意：
//不管有几个元素，需要依次实现队列动画的效果（只能用回调函数嵌套的方式去实现）
$(".button").click(function () {
    $("#box").animate({width:"300px"},1000,function () {
        $("#pox").animate({height:"200px"},1000,function () {
            $("#box").animate({opacity:0.5},1000,function () {
                $("#pox").animate({fontSize:"150px"},1000)
            });
        });
    });
​
    //动画与非动画 进行队列queue()
    //如何实现一个普通css属性里的背景颜色队列效果的动画
​
    $(".button").click(function () {
        $("#box").slideUp(1000).slideDown(1000).css("backgroud","red");
    })
    //或者先让#box滑动隐藏，在滑动显示，最后改变其颜色
    //css()方法不是动画的方法，会和第一个动画同时执行，非动画不能队列
    //实现动画和非动画一起队列，可以使用回调函数实现
​
    $(".button").click(function () {
        $("box").slideUp(1000).slideDown(1000,function () {
            $(this).css("backgroud","red")
        }).hide(3000);
​
    })
//但如果按上面的写法，当队列动画过多时，可读性下降，使原本的动画方法不够清晰，
//    所以，需要得到一个相对独立的方法，jQuery提供queue()方法；
$(".button").click(function () {
    //三个动画
    $("#box").slideUp(1000).slideDown(1000).queue(function () {
        $(this).css("backgroud","red");
​
    })
//如果想要继续在.queue()方法后面再加一个隐藏动画，queue方法无法实现，
// 这是由于该方法自身的特性导致的
//    想要实现在queue方法后面添加若干动画，
//    jQuery的queue（）的回调函数可以传递一个参数，这个参数是next()函数，
//    在结尾处去调用next()方法，即可实现链式执行队列动画
    //链式编程实现队列动画
    $(".button").click(function () {
        //四个动画
       $("#box").slideUp(1900).slideDown(1000).queue(function (next) {//这个next是一个函数
           $(this).css("backgroud","red");
           next();
       }) .hide(1000);
​
    })
//顺序编程实现队列动画
    $(".button").click(function () {
        $("#box").slideUp(1000);
        $("#box").slideDown(1000);
        $("#box").queue(function (next) {
            $(this).css("backgroud","red");
            next();
        });
        $("#box").hide(1000);
    });
​
    //注意：因为next函数是jQuery1.4版本之后才出现，
    // 之前可以用.dequeue(),执行下一个元素队列中的函数
    //使用dequeue()
    $(".button").click(function () {
        $("#box").slideUp('slow').slideDown('solw').queue(function () {
            $(this).css("backgroud","red");
            $(this).dequeue();//相当于上面的next函数，这里的function不需要传递next函数的参数
​
        }).hide(1000);
})
})
​
​
    //动画的清除clearqueue（）;
    //清理队列，
    //如：我想在执行完第二个动画后就不再执行，
// 只要在第二个动画的回调函数里添加clearqueue（）函数就可以停止后面的动画
    $(".button").click(function () {
        $("#box").slideUp(1000).slideDown(1000,function () {
            $(this).clearQueue()
        }).queue(function (next) {
            $(this).css("backgroud","red");
        }).hide(1000);
​
    })
//获取队列动画的长度
    function getQueueCount() {
        return $("#box").queue("fx").length;//fx表示默认的队列参数
    };
    //用法：
      $(".button").click(function () {
          $("#box").slideUp(1000,function () {
              alert(getQueueCount())
          }).slideDown(1000,function () {
              alert(getQueueCount())
          }).queue(function (next) {
              alert(getQueueCount());
              $(this).css("backgroud","red");next()
​
          }).hide(1000,function () {
              alert(getQueueCount())
          })
​
      })
​
    //动画的停止stop（）
    //jQuery提供一个动画停止的方法stop
    它里面有两个参数，clearQueue：传递一个布尔，代表是否清除动画
    gotoEnd:表示是否直接将正在执行的动画跳转到末尾的状态
​
​
    $(".button").click(fun
    $("#box").animate({left:"1000px"},3000)
    );
​
      $(".stop").click(function () {
          $("#box").stop();//表示将#box这个元素的动画停止掉，没有参数的stop（）函数只是一个单纯的动画停止的方法
​
      })
//队列动画的停止
​
    $(".button").click(function () {
        $("#box").animate({left:"300px"},1000)
            .animate({bottom:"300px"},1000)
            .animate({width:"300px"},1000)
            .animate({height:"300px"},1000);
​
​
    })
    $(".stop").click(function () {
        $("#box").stop();//如果使用没有参数的stop函数去停止队列动画，
                    // 那么只会停止第一个队列动画，后面的队列动画会在继续执行
    })
    //如果想要将队列动画全部停止，可以在stop函数里传参数
//       第一个参数：如果为true，表示停止并清除后面的队列动画，即动画完全停止（默认为false）
//第二个参数：如果为true：表示停止并清除掉后面的队列动画，并且
//
//当前的动画会立刻跳转至当前这条动画执行完毕的末尾位置
​
$(".stop").click(function () {
    $("#box").stop(true,true);
})
​
​
    //动画的延迟delay（）函数
    $(".button").click(function () {
        $("#box").delay(2000)//如果delay（2000）写在#box元素后面，表示延迟2秒在执行动画
            .animate({left:"300px"},1000)
            .animate({bottom:"300px"},1000)
            .delay(3000)//如果写在这里，表示animate（{left:"300px"},1000)：表示这段代码执行完毕后，延迟3秒再执行下面的代码
​
​
    })
​
//获取当前正在执行的动画animated()函数表示（过滤器）
$(".button").click(function () {
    $("#box").slideUp(1000,function abc() {
        $(this).slideToggle(1000,abc);//无限循环调用自己，实现动画不停的执行
    })
    //或者用一下方法也可以实现动画不停的执行
    $("#box").slideToggle(1000,function () {
        $(this).slideToggle(1000,arguments.callee);//arguments.callee:表示调用自身
    })
​
$(".animal").click(function () {
    //获取当前正在执行的动画，并将它的颜色改为蓝色后停止动画的执行
    $(":animated").css("backgroud","blue").stop(true);
})
​
​
})
​
  //动画的全局属性
    [$.fx.off属性可以关闭页面上所有的动画]
    [$.fx.interval属性表示可以调整动画每一秒运行的帧数]//适用于设置jQuery动画
    $.fx.interva：适用于设置jQuery动画，每个多少毫秒绘制一个帧图像（默认13毫秒）
    数字越小越流畅，但可能会影响浏览器的性能
​
    //设置动画绘制一帧帧的时间为100毫秒
    $.fx.interval=100;
      //关闭页面上的所有的动画
    $.fx.off=true;
​
//补充：
       在.animate（）方法中有宇哥可选参数easing运动方式，这个参数大部分的值需要插件完成
​
    自带的有两个参数：
      swing（缓动）（默认）
      linear（匀速）
$(".button").click(function () {
​
}
//表示在一秒时间内，以缓动运动的方式运行动画
    $("#box").animate({left:"300px"},1000,'swing');//swing表示缓动运动，就是刚开始运行慢，到中间比较快，最后慢，两头慢，中间快
​
//让其匀速运动,表示在一秒内完成
    $("#pox").animate({left:"800px"},1000,'linear');
​
​
})
​
</script>
​
</body>
</html>
熙哲数
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
详解jQuery动画
weixin_44677940的博客
03-22 150
jQuery的动画主要分为两个大方面：内置动画和自定义动画，本文主要学习个讲解这两个方面以及jQuery的动画的执行顺序。 一．内置动画： 1.显示hide()/隐藏show()/显示或隐藏toggle() 代码如下： 2.上拉slideUp()/下拉slideDown()/上拉或下拉slideToggle() 代码如下： 3.淡出fadeOut()/淡入fadeI...
jQuery动画与特效详解
10-24
本文将详细讲解jQuery中的一些关键动画和特效方法，包括显示与隐藏、渐入渐出、飞入飞出、自定义动画等。 首先，我们来看基本的显示和隐藏效果。在jQuery中，`show()`和`hide()`方法是实现元素显示和隐藏的最基础...
Jquery 效果使用详解
10-23
《jQuery效果使用详解》 jQuery，作为一款强大的JavaScript库，极大地简化了JavaScript的DOM操作，特别是在处理CSS选择器和XPath支持方面，使得开发者能够更加高效地编写JavaScript代码，即便是对于JavaScript初学...
详解jQuery中基本的动画方法
10-20
本文将详细探讨jQuery中实现动画效果的基础方法，包括show()和hide()、fadeIn()和fadeOut()、slideUp()和slideDown()，以及自定义动画方法animate()。 首先，show()和hide()方法是jQuery中最基础的动画方法。hide()...
jQuery事件与动画基础详解
10-20
jQuery事件与动画基础详解 在JavaScript的DOM操作中，jQuery库极大地简化了事件处理和动画效果的实现。本文将深入探讨jQuery中的事件处理和动画基础知识，帮助初学者掌握这两个核心概念。 1. 事件处理 事件是用户...
jquery动画详解
m0_46375155的博客
03-26 158
jquery动画详解 jquery封装了有特定效果的一些动画，为内置动画，内置动画无法满足客户或者程序员的需求，jquery又封装了自定义动画的接口函数，所以jquery动画有内置动画和自定义动画。 内置动画： 显示hide()/隐藏show()/显示或隐藏toggle() 代码如下： <style> #box{width: 100px;height: 100px;backgro...
jQuery动画基础讲解(教你玩转jQuery动画)
IT_qslong的博客
06-18 351
动画效果 显示和隐藏动画 show() hide() $(function () { // 编写jQuery相关代码 $("button").eq(0).click(function () { // $("div").css("display", "block") // 注意: 这里的时间是毫秒 $("div").show(1000, function () { // 作用: 动画执行完毕之后调用
动画
qq_26746521的博客
01-09 371
列队动画和同步动画列队动画就是一个动画执行完以后执行另一个，使用回调函数实现的，在判断动画执行完以后会执行这个回调函数， 同步动画就是多个对象同时实现动画，使用将timer绑定在各自的对象上 封装动画Base.prototype.animate = function (obj) { for (var i = 0; i < this.elements.length; i ++) {
jQuery动画效果
张子又
01-19 6429
1. 隐藏和显示 show()方法和hide()方法是jQuery中最基本的动画方法。在HTML文档里，为一个元素调用hide()方法，会将该元素的display样式改为“none”。 1.1 hide() 和 show() 我们可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素： &lt;body&gt; &lt;div style="width: 200px; ...
jQuery学习笔记（三）jQuery动画效果
一叶知秋
09-25 2325
1、对角线动画 效果：让元素在规定时间里沿着左上角来回显示和隐藏 jq对象.show() hide() toggle() 注意： 1. 括号中可以加动画时长（slow normal fast 毫秒数）任一个； 2. fast=200 normal=400 slow=600 3. 默认不做动画 演示： html代码： &lt;body&gt; &lt;input...
jQuery理解之（一）动画与特效
weixin_33912638的博客
01-20 102
本节主要降级和学习jQuery的自动显隐，渐入渐出、飞入飞出。自定义动画等。 1.显示和隐藏hide()和show() 对于动画来说，显示和隐藏是最基本的效果之一，本节简单介绍jQuery的显示和隐藏。 <script type="text/javascript"> $(function() { $("input:f...
jQuery动画效果大全
热门推荐
若水弹丸之地
12-20 2万+
一、show()方法和hide()方法 1.show()与hide() show()：根据hide()方法记住的display属性值来显示元素。 hide()   : 将该元素的display样式改为 "none"。 2.参数让元素动起来： 单纯的调用show()和hide()相当于css("display","none/block/inline"),不会有任何动画。如果希望调用元素
jquery动画与效果
ZHANGHUI3239619的专栏
12-07 793
1.基本效果 匹配元素从左上角开始变浓变大或缩小到左上角变淡变小 ①隐藏元素 除了可以设置匹配元素的display:none外,可以用以下函数 hide(speed,[callback])  返回值:jQuery  参数-speed:三种预订速度之一的字符串String(slow,normal,fast)或表示动画时长的毫秒数Number  callback:在完成动画时执行的函数,每个匹配元素执
基于ssm和vue的 校园短期闲置资源置换平台源码 校园短期闲置资源置换平台代码（高分毕设项目源码）
最新发布
08-23
1. 校园短期闲置资源置换平台代码说明：经导师指导并认可通过的98分毕设项目代码。 2.适用对象：本代码学习资料适用于计算机、电子信息工程、数学等专业正在做毕设的学生，需要项目实战练习的学习者，也适用于课程设计、期末大作业。 3.技术栈：前端是vue，后端是ssm，项目代码都经过严格调试，代码没有任何bug！ 4. 作者介绍：大厂码农，java领域创作者，阿里云开发社区乘风者计划专家博主，专注于大学生项目实战开发，文章底部有博主联系方式，更多优质系统、项目定制请私信。 5. 最新计算机软件毕业设计选题大全: https://blog.csdn.net/weixin_45630258/article/details/135901374
jQuery动画效果详解与应用
### jQuery动画 jQuery提供了多种内置的动画效果，使得开发者可以轻松地为网页添加动态视觉效果。以下是jQuery动画的基本类别： 1. **基本动画**：包括显示、隐藏和切换元素。例如，`fadeIn()`、`fadeOut()`用于...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值