jQuery中Animate的示例

这篇文章给大家分享的是有关jQuery中Animate的示例的内容。小编觉得挺实用的，因此分享给大家做个参考。一起跟随小编过来看看吧。

创新互联专注于内乡网站建设服务及定制，我们拥有丰富的企业做网站经验。热诚为您提供内乡营销型网站建设，内乡网站制作、内乡网页设计、内乡网站官网定制、微信小程序服务，打造内乡网络公司原创品牌,更为您提供内乡网站排名全网营销落地服务。

Step

Type： Function( Number now, Tween tween )
每个动画元素的每个动画属性将调用的函数。这个函数为修改Tween 对象提供了一个机会来改变设置中得属性值。

这个是如此的模糊，让我们看下实例吧！

var k=0;
 $( ".block:first" ).animate(
          {
            left: 100,top:200
          },
          {
            duration: 1000,
            step: function( now, fx ){
                k++;                
                if(k==1) console.log(fx);
            }
);

你能想象输出结果吗？

jQuery中Animate的示例

让我们来看下jQuery源码吧：

jQuery.fx = Tween.prototype.init;
...
function Tween( elem, options, prop, end, easing ) {
    return new Tween.prototype.init( elem, options, prop, end, easing );
}
jQuery.Tween = Tween;
Tween.prototype = {
    constructor: Tween,
    init: function( elem, options, prop, end, easing, unit ) {
        this.elem = elem;
        this.prop = prop;
        this.easing = easing || "swing";
        this.options = options;
        this.start = this.now = this.cur();
        this.end = end;
        this.unit = unit || ( jQuery.cssNumber[ prop ] ? "" : "px" );
    },
...}

ok！你应该有个大致的轮廓了，让我详细讲解下参数的意义吧~~

fx
属性	类型	值
easing	字符串	动画方式"linear",swing,easeIn,easeOut...等
elem	DOM元素	正在动画的元素
end	数值	动画结束值
now	数值	动画当前值
options	对象	参数
options.duration	数值	传到动画动的duration
options.queue	字符串	动画队列
pos	数值	在动画过程中从0.0到1.0
prop	字符串	正在变化的css属性
start	数值	CSS属性开始变化的值
unit	字符串	CSS值的单位

知道这些，我们可以做很多事！

jQuery Animation实现css3动画：

jQuery Animation的工作原理是通过将元素的css样式从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。只有数字值可创建动画（比如 “margin:30px”）。字符串值无法创建动画（比如 “background-color:red”）。

像CSS3好多效果因为不是数值的，所以是没有办法直接通过animate()方法实现的。如translate(), rotate(), scale(), skew(), matrix(), rotateX(), rotateY()等方法，这些方法的一个特点就是它们的值是字符和数字混合在一起的。因此我们是不可以直接用animate()方法来动态地修改它们的值来实现动画的效果。

如果我们自己用Javascript实现CSS3动画，那么我们只能自已通过setInterval()方法来实现，实现起来比较复杂。其实animate()方法就是基于setInterval()方法进行工作的，但是可以用方便的设置动画速度，还可以设置是匀速还是变速。animate()方法的第二种用法有个stp参数规定动画的每一步要执行的函数。我们可以用使用一个不影响元素效果显著的CSS值来触发animate()方法，然后在step回调函数中修改我们想要修改的值，这样就可以间接地实现动画了。

CSS代码：

#box {
  width:100px;
  height:100px;
  position:absolute;
  top:100px;
  left:100px;
  text-indent: 90px;
  background-color:red;
}

Html代码：

Javascript代码：

var s=0;
$('#box').animate({  textIndent: 0 }, {   //这里的now参数即前面设置的数值，即textIndent: 0中的0，然后后面还有，则以后面的数值为准。
   duration:2000,
   step: function(now,fx) {
        s++;
        fx.start=45;//你可以尝试修改start,end值，来看rotate的变化
        fx.end=0;        
        if(s==1) console.log(fx.start+"----"+fx.end+"---"+fx.startTime);
      $(this).css('-webkit-transform','rotate('+now+'deg)');
   }
});

这里使用text-indent属性来触发动画，是因为我们这里没有文字，所以使用text-indent而不会影响到元素的样式效果，这里也可以用font-size等。然后使用animate()方法产生的节奏来实现动画。

感谢各位的阅读！关于jQuery中Animate的示例就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到吧！

标题名称：jQuery中Animate的示例
本文URL：http://scjbc.cn/article/jceoih.html

jQuery中Animate的示例

其他资讯