前的讲话

  很多状况下,前面介绍的jQuery动画的简要意义束手无策满足用户的各种需要,那么就是需要对动画片有再度多的界定,需要运用一些尖端的自定义动画来解决这些题材。本文将详细介绍jQuery的自定义动画animate

 

属性对象

  animate()方法的常规使用和前介绍的3种普遍动画的采取方式类似

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

  animate()方法的率先个参数是一个得参数,表示一个CSS属性和价值的对象,动画将基于当时组对象活动

  所有用于动画的习性必须是数字的,除非其他发征;这些性如果未是数字的以不克利用基本的jQuery功能。例如,width、height或者left可以实行动画,但是background-color不克

  当然,除了样式属性,一些非样式的属性,如scrollTop、scrollLeft以及从定义属性,也不过采用为动画

  下面为素于右侧走100px为例,此时需要拿元素设置为稳定元素

<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()方法的老二个参数持续时间,用一个字符串或者数字操纵动画将运行多久。默认值为”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参数表示一个字符串或者数字操纵动画将运行多久

【2】easing(default:swing)

  easing参数表示过渡使用啊种缓动函数

【3】complete

  complete参数表示在动画就时实施之函数

【4】queue(default:true)

  queue参数表示是否将动画放置于效力排中,如果为false时,将随即开始动画

  从jQuery1.7方始,该项也得以承受一个字符串,表示动画被补加至由该字符串表示的行中

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

相关文章

网站地图xml地图