眼前的说话

  jQuery动画可以使用fade、hide、slide等方法实现核心动画效果,可以利用animate实现从定义动画,甚至可以运用queue实现卡通队列。但是,却缺乏了对动画控制的介绍。动画产生后,描述动画状态、进行动画延迟、操作动画暂停等还是老大要紧的功效。本文将详细介绍jQuery动画控制

 

动画状态

  当用户迅速在某元素多次履行动画时,会招动画累积的气象。这时,就得引入动画状态这个定义。判断元素是否处在动画状态中,如果处在,则非加加新动画

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>

艾动画

【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>    

卡通延迟

  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.fx.off】

  jQuery.fx.off属性可以用来对jQuery动画进行全局控制,默认为undefined,当以此特性设置为true的时光,调用时拥有动画方法以立即设置元素呢他们之最终状态,而无是展示力量

  当然,动画可以由此设置是特性为false重新打开

  [注意]鉴于该属性是全局性的,因此于没有动画正在周转还是已所有动画时,此属性的更动才能够见效

<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':'300px'},1000).animate({'width':'100px'},1000);
});
$('#btn2').click(function(){
    $.fx.off = !$.fx.off;
});
</script>

【jQuery.fx.interval】

  jQuery.fx.interval属性可以改动画的频率,以毫秒为单位

  这个特性可以装动画每秒运行帧数,默认是13毫秒。该属性值越小,在进度比较快之浏览器中,动画执行的尤其流畅,但是会潜移默化程序的属性并且占更多的CPU资源

  [注意]由于该属性是全局性的,因此在没有动画正在运行还是终止所有动画时,此属性的转变才能够见效

<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':'300px'},1000).animate({'width':'100px'},1000);
});
$('#btn2').click(function(){
    $.fx.interval = 100;
});
</script>

相关文章

网站地图xml地图