详解jQuery的animate动画方法及动画排队问题解决

animate()动画方法

  • 作用:执行css属性集的自定义动画
  • 语法:$(selector).animate(styles,speed,easing,callback)

• 参数1: css 的属性名和运动结束位置的属性值的集合。
• 参数2:可选,规定动画的速度,默认是 "normal"。其他值,“slow”、“normal”、“fast”,数字格式,单位为毫秒。
• 参数3:可选,规定在不同的动画点中设置动画速度的 easing 函数,值包含 swing(变速) 和linear(匀速)。
• 参数4:可选,animate 函数执行完之后,要执行的回调函数。
• 注意:

①所有有数值的属性值都可以运动;
②其他的运动方法比如 slideUp() 等,也有参数3 和参数4

 <style>
       *{
                margin: 0;
                padding: 0;
            }
            p{
                position: relative;
                left: 0;
                margin-bottom: 10px;
                background-color: skyblue;
                width: 50px;
                height: 50px;
            }
        </style>
    <!--------------------------------------->
    <body>
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
        <p>5</p>
        <p>6</p>
        <p>7</p>
        <p>8</p>
     <script src="../jq/jquery-1.12.4.min.js"></script>
     <script>
            var $ps = $("p");
            //实际操作中,将时间这种易变的存储到一个变量中更好
            var during = 1000;
            //所有有数值的属性值都可以运动
            $ps.click(function(){
                $(this).animate({"width":500,"opacity":0.5},during,"swing")
            })
        </script>
    </body>

动画排队

  • 同一个元素对象身上,如果定义了多个动画,动画会排队等待执行。
  • 如果是不同的元素对象都有动画,不会出现排队机制。
  • 如果是其他非运动的代码,不会等待运动完成。比如,改变css样式,不会排队。
<style>
  div{
       width: 100px;
       height: 100px;
       border: 8px solid #ccc;
       position: absolute;
       left: 0;
       top: 0;
       background: url(../../imgs/1.jpg) no-repeat center center;
     }
.box2{
      border-radius: 50%;
      overflow: hidden;
       }
div span{
       position: absolute;
       left: 0;
       top: 0;
       width: 100%;
       height: 100%;
       background-color: rgba(221, 130, 130, 0.4);
     }
</style>
  <!-------------css样式------------------->
<body>
  <div class="box1"><span></span></div>
  <div class="box2"><span></span></div>

<script src="../jq/jquery-1.12.4.min.js"></script>
<script>
 var $box1 = $(".box1");
 var $box2 = $(".box2");
 var during = 2000;
 //动画排队对比
 $box2.animate({"left": 400,"top":400},during)
 //box1、box2上各自进行各自的动画
 //同一元素上的多个动画排队
 $box1.animate({"left": 400},during)//排队
 $box1.animate({"top": 400}, during)
 // 动画的底部就是一个定时器,异步加载
 // 非运动的代码,关于同一个元素对象的,不会排队
 //$box1.css("height",200)
 </script>
</body>
  • 自带动画的显示隐藏方法,如果设置给同一个元素,也有动画排队
//其他的运动方法,如果设置给同一个元素,也会发生排队
  $box2.mouseenter(function(){
      $(this).children().slideUp(during)
  })
  $box2.mouseleave(function(){
      $(this).children().slideDown(during)
  })
  //鼠标快速的移上移下,之后box2的灰色span就一直在滑进滑出,直到执行完所有次数
  • 同一个元素身上的运动,可以简化成链式调用的方法
//同一个元素进行多个运动,可以简化通过链式调用实现
//但是还是要进行排队
$box1.children().fadeOut(500).fadeIn(500).fadeOut(500).fadeIn(500).fadeOut(500).fadeIn(500)

delay()延迟方法

  • 将delay()设置在某个运动方法之前,表示后面的运动要在规定的时间之后再执行,有延迟运动的效果
  • delay()的参数是时间的数值,其他的运动方法也有延迟效果
   //延迟
$box1.children().delay(3000).fadeOut(500).fadeIn(500).fadeOut(500).fadeIn(500).fadeOut(500).fadeIn(500)

stop()停止动画方法

  • 设置元素对象身上的排队的动画以何种方式进行停止
  • stop()有两个参数,可以得到四种停止方式,参数都是布尔值

• 参数1:设置是否清空后面的动画排队,如果是 true 表示清空(后面还排着的动画也一起被清除掉,不再执行),如果是 false 表示不清空只停止当前的一个动画(后面的动画立即开始执行)。
• 参数2:设置当前动画是否立即完成,如果是 true 表示立即完成,对象会立刻走到结束位置,如果是 false 表示不完成当前动画,立即停止在当前位置。

<style>
 div {
      width: 100px;
      height: 100px;
      border: 8px solid #ccc;
      position: absolute;
      left: 0;
      top: 40;
      background: url(../../imgs/1.jpg) no-repeat center center;
   }
 div span {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(221, 130, 130, 0.4);
    }
 </style>
</head>

<body>
 <input type="button" value="true true" id="btn1">
 <input type="button" value="true false" id="btn2">
 <input type="button" value="false false" id="btn3">
 <input type="button" value="false true" id="btn4"><br>

 <div class="box1"><span></span></div>

<script src="../jq/jquery-1.12.4.min.js"></script>
<script>
   var $box1 = $(".box1");

   var during = 2000;

   //同一元素上的多个动画排队
   $box1.animate({ "left": 400 }, during)
   $box1.animate({ "top": 400 }, during)
   $box1.animate({"left":0},during)
   $box1.animate({"top":40},during)

  // 停止动画
  //添加按钮点击事件
  var $btn1 = $("#btn1")
  var $btn2 = $("#btn2")
  var $btn3 = $("#btn3")
  var $btn4 = $("#btn4")

  //true true  清空后面排队动画  且  当前动画立即完成,停到结束位置
  $btn1.click(function () {
       $box1.stop(true, true);
  })
  //true false  清空动画  停在当前
  $btn2.click(function () {
     $box1.stop(true, false);
  })
  //false false  不清空后面动画,停在当前
  //然后执行下一步动画
  $btn3.click(function () {
     $box1.stop(false, false);
  })
  //false true  不清空后面动画,当前运动立即到结尾
  $btn4.click(function () {
       $box1.stop(false, true);
  })
 </script>
</body>
  • 默认情况下,参数值为false
  • 实际工作中,一般要求清空后面的排队,停止当前的位置,多使用stop(true),第二个参数不设置默认为false

清空动画排队

动画排队问题

  • 如果将开启运动的程序放在一个事件函数中,事件多次被触发,会执行多次函数,就会在一个元素身上添加了多个动画,会进行动画排队。(动画积累问题)

需要去清除排队的动画,进行防骚扰操作。

  • 解决方法

方法一:利用stop()方法

在每一个运动函数之前都增加一个stop(true),表示在运动执行之前,会将前面排队的动画清空,然后停止在当前位置

<style>
 div {
     width: 100px;
     height: 100px;
     border: 8px solid #ccc;
     position: absolute;
     left: 0;
     top: 0;
     background: url(../../imgs/1.jpg) no-repeat center center;
   }
div span {
     position: absolute;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
     background-color: rgba(221, 130, 130, 0.4);
  }
  </style>
<body>
  <input type="button" value="true true" id="btn1">
  <input type="button" value="true false" id="btn2">
  <input type="button" value="false false" id="btn3">
  <input type="button" value="false true" id="btn4"><br>

  <div class="box1"><span></span></div>

  <script src="../jq/jquery-1.12.4.min.js"></script>
  <script>
     var $box1 = $(".box1");

     var during = 2000;
    //清空动画
    $box1.mouseenter(function(){
        $(this).children().stop(true).slideUp(during)
    })

   $box1.mouseleave(function(){
       $(this).children().stop(true).slideDown(during)
   })
    </script>
</body>

方法二:利用函数节流方法

如果元素在运动,直接return,不要执行后面的运动代码。

每个jQuery对象,都能调用一个is()方法,作用是显示元素对象的某种状态
如果参数位置是is(":animated"),animated是正在运动的意思,返回值是布尔值,true表示正在运动,false表示没有运动

//函数节流方法
$box1.mouseenter(function(){
    if(is(":animated")){
        //如果判断是正在运动的话,直接return返回,不再执行其他动画
        return;
    }
    //没有运动的话,则继续执行后面的新动画
    $(this).children().slideup(during);

})

$box1.mouseenter(function(){
    if(is(":animated")){
        //如果判断是正在运动的话,直接return返回,不再执行其他动画
        return;
    }
    //没有运动的话,则继续执行后面的新动画
    //有时候为了保险起见,会与stop(true)结合使用
    $(this).children().stop(true).slideup(during);

})
  • 有时候为了保险起见,函数节流使用时,也会与stop(true)结合使用
  • stop(true)和函数节流方法,这两种解决动画积累问题的方法还是有区别的。stop方法可以使停止时,停在当前的位置,而函数节流,停止时return返回后,当前所处的动画一般都是会执行完的。

以上就是详解jQuery的animate动画方法及动画排队问题解决的详细内容,更多关于jQuery animate动画方法的资料请关注我们其它相关文章!

(0)

相关推荐

  • 原生js实现jquery函数animate()动画效果的简单实例

    通过在公司一个月的实习,慢慢的对css跟html算是比较熟悉了,这几天开始研究js,今天用js写了一个jquery的animate函数,测试了下,性能还可以.个人觉得jquery并不是万能的,因为是个框架,所以有些东西写的比较死,就像animate函数一样,可选的参数不多有时候可能并不能实现我们想要的效果. 注释的部分是用来测试用的,写代码的过程并不是十分顺利,因为用js平时用的不是很细,都是大体知道方法,也用过,但等到真正要实现动画函数的时候,细枝末节写错了就可能把人难住了. 函数里面有几个参

  • JQuery animate动画应用示例

    本文实例讲述了JQuery animate动画.分享给大家供大家参考,具体如下: 滑动选项卡 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> .btns input{ width: 100px; h

  • jQuery封装animate.css的实例

    animate.css是一个有趣的,跨浏览器的css3动画库. 一.首先引入animate css文件 <link rel="stylesheet" href="animate.css" rel="external nofollow" > 二.给指定的元素加上指定的动画样式名 <div id="box" class="animated bounce"></div> 这里包

  • 利用jQuery的动画函数animate实现豌豆发射效果

    先来看看效果图 豌豆射手,草坪还有子弹都是现成的图片, 1. jQuery是库还是框架? jQuery可以说是现在最流行的一个js类库,而非框架. 之前在知乎上看到有人说了这样一句话: You call library. Framework calls you. 我深以为然,字面意思大概就是你可以无约束地使用类库,却需要在各种限制条件下使用一个框架. 我私以为,js 库指的是直接和document文档元素交互的一个API,你可以直接引用库,让它为你服务.而框架是偏向于架构的层次,你如果想要使用框

  • jquery animate动画持续运动的实例

    如下所示: function fingers(){ $(".box01 .fingers").animate({"width":"7.5rem","marginLeft":"-3.75rem"},500,function(){ $(".box01 .fingers").animate({"width":"6.8rem","marginLe

  • jQuery实现立体式数字动态增加(animate方法)

    1.HTML结构 <div class="integral">已有<span class="ii"></span>积分</div> 2.js <script type="text/javascript" src="js/jquery.js" ></script> <script type="text/javascript" src

  • jQuery使用animate实现ul列表项相互飘动效果示例

    本文实例分析了jQuery使用animate实现ul列表项相互飘动效果.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"

  • jQuery中animate()的使用方法及解决$(”body“).animate({“scrollTop”:top})不被Firefox支持的问题

    jQuery中animate()的方法 用于创建自定义动画的函数. 返回值:jQuery animate(params, [duration], [easing], [callback]) 如果使用的是"hide"."show"或"toggle"这样的字符串值,则会为该属性调用默认的动画形式.paramsOptions一组包 含作为动画属性和终值的样式属性和及其值的集合 params 对象{},注意:所有指定的属性必须用骆驼形式,比如用margi

  • jQuery中animate的几种用法与注意事项

    一.animate语法结构 animate(params,speed,callback) params:一个包含样式属性及值的映射,比如{key1:value1,key2:value2} speed:速度参数[可选] callback:在动画完成时执行的函数[可选] 二.自定义简单动画 用一个简单例子来说明,实现单击某div在页面上横向飘动的效果. <style> #cube{ position:relative;/* 不加这句元素不能动 */ width:30px; height:30px;

  • jQuery animate()实现背景色渐变效果的处理方法【使用jQuery.color.js插件】

    本文实例讲述了jQuery animate()实现背景色渐变效果的处理方法.分享给大家供大家参考,具体如下: jquery animate函数不能处理背景色渐变,需要使用jquery.color插件 核心代码: $(function(){ $("#cdiv").animate( { backgroundColor:'#FF0000' },1000 ) }) 完整代码如下: <!DOCTYPE html> <html> <head> <meta

  • 浅谈原生JS实现jQuery的animate()动画示例

    本文介绍了浅谈原生JS实现jQuery的animate()动画示例,希望此文章对各位有所帮助. 参数介绍: obj 执行动画的元素 css JSON数值对,形式为"{属性名: 属性值}",指要执行动画的书序及其对应值 interval 属性每执行一次改变的时间间隔 speedFactor 速度因子,使动画具有缓冲效果,而不是匀速不变(speedFactor为1) func 执行完动画后的回调函数 注意: 必须为每一个元素分别添加一个定时器,否则会互相影响. cur != css[arr

随机推荐