眼下的话

  许多动静下,前面介绍的jQuery动画的简便意义没辙满意用户的各类须求,那么就必要对动画有更加多的界定,须要动用部分高档的自定义动画来解决那么些难点。本文将详细介绍jQuery的自定义动画animate

 

品质对象

  animate()方法的平常化使用和前边介绍的三种常见动画的选用方法类似

animate(properties[,duration][,easing][,complete])

  animate()方法的首先个参数是二个无法不参数,表示一个CSS属性和值的靶子,动画将依据那组对象活动

  全数用于动画的品质必须是数字的,除非另有证实;这几个属性尽管不是数字的将不能够选取基本的jQuery效率。举例,width、height恐怕left能够实施动画,可是background-color无法

  当然,除了样式属性,一些非样式的习性,如scrollTop、scrollLeft以及自定义属性,也可利用于动画

  下边以成分向右移动拾0px为例,此时亟需将成分设置为牢固成分

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<button id="btn">按钮</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'});
});
</script>

  CSS简写属性(如font、background、border)未有获取丰盛的援救,只辅助单一数值属性

  [注意]中划线和小驼峰二种样式都能够运用

<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="height: 100px;width: 300px;background-color: lightblue;border:1px solid black;">测试文字</div>
<script>
$('#reset').click(function(){
    history.go();
})
$('#btn1').click(function(event){
  $('#box').animate({'border-left-width':'20px'});
});
$('#btn2').click(function(event){
  $('#box').animate({'borderLeftWidth':'20px'});
});
</script>

  除了定义数值,各样属质量使用’show’、’hide’和’toggle’,这几个快速格局允许定制隐藏和出示动画用来调节成分的来得或躲藏

animate({opacity:'show'}) 相当于 fadeIn()
animate({opacity:'hide'}) 相当于 fadeOut()
animate({opacity:'toggle'}) 相当于 fadeToggle()
animate({opacity:'0.5'}) 相当于 fadeTo(0.5)

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<button id="btn1">Toggle1</button>
<button id="btn2">Toggle2</button>
<div id="box" style="height: 100px;width: 300px;background-color: lightblue;border:1px solid black;">测试文字</div>
<script>
$('#btn1').click(function(event){
  $('#box').animate({'opacity':'toggle'});
});
$('#btn2').click(function(event){
  $('#box').fadeToggle();
});
</script>

animate({height:'show'}) 相当于 slideDown()
animate({height:'hide'}) 相当于 slideUp()
animate({height:'toggle'}) 相当于 slideToggle()

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<button id="btn1">Toggle1</button>
<button id="btn2">Toggle2</button>
<div id="box" style="height: 100px;width: 300px;background-color: lightblue;border:1px solid black;">测试文字</div>
<script>
$('#btn1').click(function(event){
  $('#box').animate({'height':'toggle'});
});
$('#btn2').click(function(event){
  $('#box').slideToggle();
});
</script>

  show()、hide()、toggle()方法不加多参数时,将从未动画效果

animate({height:'show',width:'show',opacity:'show'}) 相当于show(400)
animate({height:'hide',width:'hide',opacity:'hide'}) 相当于hide(400)
animate({height:'toggle',width:'toggle',opacity:'toggle'}) 相当于toggle(400)

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<button id="btn1">Toggle1</button>
<button id="btn2">Toggle2</button>
<div id="box" style="height: 100px;width: 300px;background-color: lightblue;border:1px solid black;">测试文字</div>
<script>
$('#btn1').click(function(event){
  $('#box').animate({height:'toggle',width:'toggle',opacity:'toggle'}) ;
});
$('#btn2').click(function(event){
  $('#box').toggle(400);
});
</script>

  动画属性也得以是三个相对值。如果提供三个以+= 或
-=早先的值,那么目的值便是以这么些性格的脚下值加上大概缩减给定的数字来测算的

<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({'width':'+=100'});
});
$('#btn2').click(function(event){
  $('#box').animate({'width':'-=100'});
});
</script>

  假若第一个参数对象中设有种种值,则意味该因素将同时推行八个卡通

  [注意]属性值的单位默许是像素px,别的单位如em和%索要钦赐使用

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<button id="btn">按钮</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','width':'100'});
});
</script>

  尽管要依据顺序施行三个卡通,而不是还要施行动画,则只要求把代码拆开,然后依据顺序写就能够了

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<button id="btn">按钮</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'});
  $('#box').animate({'width':'100px'});
});
</script>

可选参数

  animate(properties[,duration][,easing][,complete])方法中除去第三本性子对象是须要参数,其他参数都以可选参数。接下来,介绍animate()方法的可选参数

持续时间

  animate()方法的第3个参数持续时间,用3个字符串大概数字垄断动画将运维多久。暗中认可值为”normal”,有三种预约速度的字符串”slow”、”normal”、”fast”分别表示600ms、400ms和200ms

  [注意]若是要自定义持续时间,必要设置为数字(如400),而并非设置为字符串’400’,不然将不见效

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<style>
li{text-decoration: underline; margin-top: 2px;}
</style>
<ul id="con" style="display:inline-block;width:100px;cursor:pointer;margin:0;padding: 0;list-style:none;">
    <li>fast</li>
    <li>normal</li>
    <li>slow</li>
    <li>100</li>
    <li>1000</li>
</ul>
<button id="reset">恢复</button>
<div id="box" style="position:relative;display:inline-block;height: 100px;width: 300px;background-color: lightblue"></div>
<script>
$('#reset').click(function(){
    history.go();
})
$('#con li').click(function(){
    var value = $(this).html();
    $('#box').animate({left:100},isNaN(Number(value)) ? value:Number(value))
})
</script>

卡通效果

  动画效果easing是第二个可选参数,表示过渡使用哪个种类缓动函数。jQuery自己提供”linear”和”swing”,其余能够采纳有关的插件,当中暗中同意值为swing

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<style>
li{text-decoration: underline; margin-top: 2px;}
</style>
<ul id="con" style="display:inline-block;width:100px;cursor:pointer;margin:0;padding: 0;list-style:none;">
    <li>swing</li>
    <li>linear</li>
</ul>
<button id="reset">恢复</button>
<div id="box" style="position:relative;display:inline-block;height: 100px;width: 300px;background-color: lightblue"></div>
<script>
$('#reset').click(function(){
    history.go();
})
$('#con li').click(function(){
    $('#box').animate({'left':'200'},1000,$(this).html())
})
</script>

回调函数

  回调函数是第九个可选参数,表示动画达成时实行的函数

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<button id="btn">按钮</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'},function(){
      alert(1);
  });
});
</script>

慎选参数

  animate()方法的另一种用法是选用选拔参数options

animate(properties,options)

  使用接纳参数时,animate()方法的率先个参数依然是性质对象,第三个参数是壹组包罗动画选项的值的聚焦。协理以下选项:

【1】duration(default:400)

  duration参数表示三个字符串只怕数字垄断(monopoly)动画将运维多长期

【2】easing(default:swing)

  easing参数表示过渡使用哪个种类缓动函数

【3】complete

  complete参数表示在动画达成时实践的函数

【4】queue(default:true)

  queue参数表示是还是不是将动画片放置在效率队列中,借使为false时,将随即初步动画

  从jQuery1.七方始,该项也足以承受一个字符串,表示动画被加多到由该字符串表示的队列中

【5】specialEasing

  specialEasing参数表示由animate()方法的首先个参数properties定义的三个或几个CSS属性,及其相应的缓动函数组成的键值对map

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<button id="btn">按钮</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','width':'100px'},{
      specialEasing:{
          left:'linear',
          width:'swing'
      }
  });
});
</script>

【6】step

  step参数表示每种动画成分的各种动画属性将调用的函数

  step参数接受四个参数(now和fx),this表示近年来正值推行动画的DOM元素集结

  个中,now代表每一步动画属性的数字值,而fx是jQuery.fx原型对象的一个引用,在那之中富含了多项属性,例如elem表示前正在推行动画的元素,start和end分别为动画片属性的率先个和尾声一个的值,prop为拓展中的动画属性

  [注意]step函数被每种动画成分的每种动画属性调用

  以下代码中,通过设置第0个div成分的step参数,使其他div成分也开展一样的运动 

<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<button id="btn">按钮</button>
<button id="reset">恢复</button>
<div id="box" style="position:relative;height: 100px;width: 300px;background-color: lightblue"></div>
<div style="position:relative;height: 100px;width: 300px;background-color: lightyellow"></div>
<div style="position:relative;height: 100px;width: 300px;background-color: lightgreen"></div>
<script>
$('#reset').click(function(){
    history.go();
})
$('#btn').click(function(event){
  $('#box').animate({'left':'100px'},
      {
          step:function(now,fx){
              $('div').css('left',now)
          }
      });
});
</script>

相关文章