首页澳门新葡亰官方网站 › 澳门新葡亰官方网站深远学习jQuery动漫调控

澳门新葡亰官方网站深远学习jQuery动漫调控

动画延迟

  delay()方法可以用来设置一个延时来推迟执行队列中后续的项

delay(duration[,queueName])

  duration是delay()方法的必须参数,用于设定下个队列推迟执行的时间,持续时间是以毫秒为单位的,默认值为'normal',代码400毫秒的延时;'fast'和'slow'分别代表200和600毫秒的延时

  queueName是delay()方法的可选参数,它是一个队列名的字符串,默认是动画队列fx

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<button id="btn1">开始动画</button>
<button id="reset">恢复</button>
<div id="box" style="position:relative;height: 100px;width: 300px;background-color: lightblue"></div>
<script>
$('#reset').click(function(){
    history.go();
})
$('#btn1').click(function(event){
  $('#box').animate({'left':'300px'}).delay(500).animate({'width':'100px'});
});
</script>

前面的话

  jQuery动画可以使用fade、hide、slide等方法实现基本动画效果,可以使用animate实现自定义动画,甚至可以使用queue实现动画队列。但是,却缺少了对动画控制的介绍。动画产生后,描述动画状态、进行动画延迟、操作动画暂停等都是很重要的功能。本文将详细介绍jQuery动画控制

 

jquery动画总结

基本动画

show() //直接显示元素,没有动画

show(speed, [callback]) //有动画,有回调函数

hide() //直接隐藏元素,没有动画

hide(speed, [callback]) //有动画,有回调函数

toggle() //切换可见状态

toggle(speed, [callback]) //有动画效果

toggle(switch) //switch决定是显示还是隐藏

滑动动画

slideDown(speed, [callback]) //向下增加高度,以显示内容,有动画效果

slideUp(speed, [callback]) //向上减小高度,以隐藏内容,有动画效果

slideToggle(speed, [callback]) //动态改变高度,动态显示和隐藏

淡入淡出动画

fadeIn(speed, [callback]) //淡入效果,动画结束会改变display来显示元素

fadeOut(speed, [callback]) //淡出效果,动画结束会改变display来隐藏元素

fadeTo(speed, opacity, [callback])
//动态改变透明度效果,不影响display属性

自定义动画

animate(params, [duration], [easing], [callback])

 

属性值一般为数字,也可以是hide,show,toggle关键字

属性值也可以是数组形式,第一个数组元素是属性的最终状态,第二个数组元素是缓动函数

不能使用margin-left这种形式,而需要使用驼峰形式marginLeft

可以使用em和%,也可以使用+=或者-=让元素做相对运动

如果duration=0,那么直接完成动画

animate(params, options)

 

基本同上

澳门新葡亰官方网站,需要注意easing和specialEasing参数,前面提到过params中也可以设置缓动函数,需要注意优先级

queue参数决定当前动画是否加入队列,默认值为true,表示加入默认队列fx;如果是false代表不加入队列;如果是字符串,代表加入自定义队列,加入自定义队列后不会自动运行而需要自己调用dequeue(queueName)来启动

step参数表示执行动画的每一步,可以用来实现自定义动画

stop([queueName], [clearQueue], [gotoEnd])

 

如果clearQueue=true,那么清空动画队列

如果gotoEnd=true,那么立即完成当前动画,可能会有闪烁现象

对animate函数的总结:

 

一个元素调用animate设置多个属性,代表多个属性同时动画

一个元素调用多次animate,那么动画效果是一个接着一个的

多个元素分别调用animate,那么多个元素同时动画

可以利用回调函数实现多个元素一个接着一个动画

下面使用动画队列实现多个元素一个接着一个动画,不依赖回调函数

动画队列

queue([queueName]) //返回数组,代表事件队列

queue([queueName], [queueArray])
//替换队列,如果是空数组也可以达到清空队列的目的

queue([queueName], [callback]) //添加函数到队列

dequeue([queueName])
//返回下一个函数,并且执行它,该函数必须直接或者间接的调用dequeue函数,直到队列为空

clearQueue([queueName]) //清空队列

delay(duration, [queueName]) //添加延迟到队列中

动画队列总结:

 

除去show();hide();toggle();这些不带参数的函数,其它动画函数都会添加到队列中

动画队列和Promise有点像,但还是不一样,Promise函数每次调用返回值都是Deferred对象,所以可以链式调用;动画队列是依靠循环调用dequeue函数来实现一个接着一个执行函数。

动画队列和动画队列名称是相关的,默认名称是fx,但是和调用对象也是相关的。

可以添加任意函数到队列中,就算是ajax,setTimeout等异步函数,咱也可以在其回调函数中调用dequeue函数,从而达到依次执行的目的。

动画全局控制

jquery.fx.off=true; 没有动画效果,立即完成动画

jquery.fx.interval=13;
动画间隔,默认值是13,值越小,动画效果越流畅,也更加消耗CPU资源;值越大,动画效果就越不流畅。

判断是否正在动画

$this.is(":animated");

 

扩展animate函数

主要就是扩展$.fx.step对象,比如:

 

// jquery.path.js插件,实现贝塞尔曲线动画
jQuery.fx.step.path = function(fx) {
  var css = fx.end.css( 1 - fx.pos );
  if ( css.prevX != null ) {
    jQuery.cssHooks.transform.set( fx.elem, "rotate(" + Math.atan2(css.prevY - css.y, css.prevX - css.x) + ")" );
  }
  fx.elem.style.top = css.top;
  fx.elem.style.left = css.left;
};
// jQuery UI 颜色动画
jQuery.fx.step[ hook ] = function( fx ) {
   if ( !fx.colorInit ) {
      fx.start = color( fx.elem, hook );
      fx.end = color( fx.end );
      fx.colorInit = true;
   }
   jQuery.cssHooks[ hook ].set( fx.elem, fx.start.transition( fx.end, fx.pos ) );
};
// animate函数可以实现size属性动画效果
jQuery.fx.step['size'] = function(fx)
{
   if ( !fx._sizeInit )
   {
      var $el = $(fx.elem),
          c = fx.end.center || {top: 0, left: 0};

      fx.start = $el.offset();
      $.extend(fx.start, {width: $el.width(), height: $el.height()});

      fx._sizer = {};

      fx._sizer.topDelta = c.top - (c.top * fx.end.height / fx.start.height);
      fx._sizer.leftDelta = c.left - (c.left * fx.end.width / fx.start.width);
      fx._sizer.widthDelta = fx.end.width - fx.start.width;
      fx._sizer.heightDelta = fx.end.height - fx.start.height;

      fx._sizeInit = true;
   }

   fx.elem.style.top = fx.start.top + Math.floor(fx._sizer.topDelta * fx.pos) + 'px';
   fx.elem.style.left = fx.start.left + Math.floor(fx._sizer.leftDelta * fx.pos) + 'px';
   fx.elem.style.width = fx.start.width + Math.floor(fx._sizer.widthDelta * fx.pos) + 'px';
   fx.elem.style.height = fx.start.height + Math.floor(fx._sizer.heightDelta * fx.pos) + 'px';

}

 

基本动画 show()
//直接显示元素,没有动画 show(speed, [callback]) //有动画,有回调函数
hide() //直接隐藏元素,没有动画 hide(spe...

动画状态

  当用户快速在某个元素多次执行动画时,会造成动画累积的现象。这时,就需要引入动画状态这个概念。判断元素是否处于动画状态中,如果处于,则不添加新动画

is(':animated')

  使用is(':animated')方法来判断元素是否处于动画状态

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<button id="btn1">按钮一</button>
<button id="btn2">按钮二</button>
<button id="reset">恢复</button>
<div id="box" style="position:relative;height: 100px;width: 300px;background-color: lightblue"></div>
<script>
$('#reset').click(function(){
    history.go();
})
$('#btn1').click(function(event){
  $('#box').animate({'left':'+=100px'});
});
$('#btn2').click(function(event){
    if(!$('#box').is(':animated')){
        $('#box').animate({'left':'+=100px'});        
    }
});
</script>

动画状态

  当用户快速在某个元素多次执行动画时,会造成动画累积的现象。这时,就需要引入动画状态这个概念。判断元素是否处于动画状态中,如果处于,则不添加新动画

is(':animated')

  使用is(':animated')方法来判断元素是否处于动画状态

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<button id="btn1">按钮一</button>
<button id="btn2">按钮二</button>
<button id="reset">恢复</button>
<div id="box" style="position:relative;height: 100px;width: 300px;background-color: lightblue"></div>
<script>
$('#reset').click(function(){
    history.go();
})
$('#btn1').click(function(event){
  $('#box').animate({'left':'+=100px'});
});
$('#btn2').click(function(event){
    if(!$('#box').is(':animated')){
        $('#box').animate({'left':'+=100px'});        
    }
});
</script>
目录

[1]动画状态 [2]停止动画 [3]动画延迟[4]全局控制

停止动画

【stop()】

  stop()方法用于停止匹配元素当前正在运行的动画

stop([queue][,clearQueue][,jumpToEnd])

  stop()方法可以接受3个可选参数,第一个参数queue表示停止动画队列的名称;第二个参数clearQueue表示是否清空队列中的动画,默认值为false;第三个参数jumpToEnd表示是否当前动画立即完成,默认值为false

【1】当stop()方法不接受任何参数时,将立刻停止当前动画

  对于hover动画效果来说,经常出现用户把光标移入元素时出发触发动画效果,但当前动画没有结束时,用户已经将光标移出元素。这样移入移出过快会导致动画效果延迟

  此时,只要在光标移入、移出动画之前加入stop()方法就可以结束当前动画,并立即执行队列中下一个动画

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<button id="reset">恢复</button>
<div id="box" style="position:relative;height: 100px;width: 300px;background-color: lightblue">未设置stop的hover动画效果</div>
<div id="box1" style="position:relative;height: 100px;width: 300px;background-color: lightgreen">设置stop的hover动画效果</div>
<script>
$('#reset').click(function(){
    history.go();
})
$('#box').hover(function(event){
    $(this).animate({'width':'400px'})
},function(){
    $(this).animate({'width':'300px'})
});
$('#box1').hover(function(event){
    $(this).stop().animate({'width':'400px'})
},function(){
    $(this).stop().animate({'width':'300px'})
});
</script>

【2】stop()参数clearQueue表示是否清空队列中的动画,默认值为false

  当设置该参数为true时,则不仅停止当前动画,而且会清空队列中动画

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<button id="btn">开始动画</button>
<button id="btn1">停止当前动画</button>
<button id="btn2">停止当前及后续动画</button>
<button id="reset">恢复</button>
<div id="box" style="position:relative;height: 100px;width: 300px;background-color: lightblue"></div>
<script>
$('#reset').click(function(){
    history.go();
})
$('#btn').click(function(event){
  $('#box').animate({'left':'100px'},1000).animate({'width':'200px'},1000);
  $('#box').animate({'left':'0'},1000).animate({'width':'100px'},1000);
});
$('#btn1').click(function(event){
    $('#box').stop();
})
$('#btn2').click(function(event){
    $('#box').stop(true);
})
</script>

【3】stop()参数jumpToEnd表示是否当前动画立即完成,默认值为false

  当该参数设置为true时,当前动画立即完成

  stop()相当于stop(false,false)表示停止执行当前动画,后续动画接着进行

  stop(true,false)表示停止执行当前动画,后续动画不再进行

  stop(false,true)表示当前动画立即完成,后续动画接着进行

  stop(true,true)表示当前动画立即完成,后续动画不再进行

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<input id="btn" type="button" value="开始动画">
<button>stop()</button>
<button>stop(true,false)</button>
<button>stop(false,true)</button>
<button>stop(true,true)</button>
<input id="reset" type="button" value="恢复">
<div id="box" style="position:relative;height: 100px;width: 300px;background-color: lightblue"></div>
<script>
$('#reset').click(function(){
    history.go();
})
$('#btn').click(function(event){
  $('#box').animate({'left':'100px'},1000).animate({'width':'200px'},1000);
  $('#box').animate({'left':'0'},1000).animate({'width':'100px'},1000);
});
$('button').click(function(event){
    jQuery.globalEval("$('#box')." + $(this).html());
})
</script>

【finish()】

  finish()方法是另一种停止动画的方法,它可以停止当前正在运行的动画,删除所有排队的动画,并完成匹配元素所有的动画

finish([queue])

  finish()方法可以接受一个可选参数queue表示停止动画队列的名称

  finish()方法和stop(true,true)很相似,stop(true,true)将清除队列,并且目前的动画跳转到其最终值。但是,不同的是,finish()会导致所有排队的动画的CSS属性跳转到他们的最终值

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<input id="btn" type="button" value="开始动画">
<button>finish()</button>
<button>stop(true,true)</button>
<input id="reset" type="button" value="恢复">
<div id="box" style="position:relative;height: 100px;width: 300px;background-color: lightblue"></div>
<script>
$('#reset').click(function(){
    history.go();
})
$('#btn').click(function(event){
  $('#box').animate({'left':'100px'},1000).animate({'width':'200px'},1000);
  $('#box').animate({'left':'0'},1000).animate({'width':'100px'},1000);
});
$('button').click(function(event){
    jQuery.globalEval("$('#box')." + $(this).html());
})
</script>    

转载本站文章请注明出处:澳门新葡亰官方网站 http://www.radioritmo-bl.com/?p=169

上一篇:

下一篇:

相关文章