来自 澳门威尼斯人平台 2019-12-18 03:16 的文章
当前位置: 澳门威尼斯人平台 > 澳门威尼斯人平台 > 正文

jQuery中animate方法用法实例-Web前端之家

复制代码 代码如下: /*7536-7646*/ animate: function( prop, speed, easing, callback ) { if ( jQuery.isEmptyObject { return this.each; } //#7864行this.options.complete.call使得其可以不断的连续执行动画,比如$.animate.animate这样的动画队列; return this[ optall.queue === false ? "each" : "queue" ] { // XXX 'this' does not always have a nodeName when running the // test suite var opt = jQuery.extend, p, isElement = this.nodeType === 1, hidden = isElement && jQuery, self = this; //要执行动画的prop,prop一般是一个plainObj,形如{key1:value1,key2:value2}; for { //驼峰改写,有些比如magrin-top需要变成驼峰的属性即变成marginTop;见cameCase方法; var name = jQuery.camelCase; //fix属性;主要是前面camelcase的属性; if { prop[ name ] = prop[ p ]; delete prop[ p ]; p = name; } //如果执行$.hide;如果这个元素本身是hidden,而动画里面又写hide,直接运行callbacks就可以了; if ( prop[p] === "hide" && hidden || prop[p] === "show" && !hidden ) { return opt.complete.call; } //如果prop[key]==并且是一个dom元素;需要有些特殊的处理; if ( isElement && ( p === "height" || p === "width" ) ) { // Make sure that nothing sneaks out // Record all 3 overflow attributes because IE does not // change the overflow attribute when overflowX and // overflowY are set to the same value opt.overflow = [ this.style.overflow, this.style.overflowX, this.style.overflowY ]; // Set display property to inline-block for height/width // animations on inline elements that are having width/height // animated if ( jQuery.css === "inline" && jQuery.css === "none" ) { if ( !jQuery.support.inlineBlockNeedsLayout ) { this.style.display = "inline-block"; } else { var display = defaultDisplay; // inline-level elements accept inline-block; // block-level elements need to be inline with layout if ( display === "inline" ) { this.style.display = "inline-block"; } else { this.style.display = "inline"; this.style.zoom = 1; } } } } //如果prop[key]是一个数组;只用第一个值prop[p][0]; if ( jQuery.isArray { // Create and add to specialEasing (opt.specialEasing = opt.specialEasing || {})[p] = prop[p][1]; prop[p] = prop[p][0]; } } if ( opt.overflow != null ) { //如果动画元素的overflow已经被设置的情况下,把它暂时为hidden; this.style.overflow = "hidden"; } //当前动画键值对,其实就是prop; opt.curAnim = jQuery.extend; //这里便是动画的核心了,对每一个prop[key]进行处理; jQuery.each( prop, function { //获取一个Fx对象;传入的每一个参数都被设置成为这个对象的属性;其中self是指动画元素自身;opt是前面产生的对象; var e = new jQuery.fx; //当执行show||hide操作的时候prop==fxAttrs if { e[ val === "toggle" ? hidden ? "show" : "hide" : val ]; } else { var parts = rfxnum.exec, //start保存了初始值,它可能在style,也可能在css中,如果该值==null,undefiend,auto,0等将被设置为0; start = e.cur { //end是指变化量的大小,比如:{left:-=66px},那么end=66; var end = parseFloat, //单元运算符,就是px,%;如果是一些不能带单位的,比如z-index,设置为空,否则就设置为px; unit = parts[3] || ( jQuery.cssNumber[ name ] ? "" : "px" ); // We need to compute starting value //如果不是px,比如%,em等等; if { //设置该属性值name为 + unit,如果end=0;设置为1;开始值被设置为start = * start; jQuery.style( self, name, ; //这里e.cur;是不一样的,因为jQuery.style( self, name, 的执行使得start被改变;用于处理end=0的情况;因为e.cur()作为除数,不能为0; start = * start; jQuery.style( self, name, start + unit); } // If a +=/-= token was provided, we're doing a relative animation if { //end相应的被设置为运算后的变量值; end = ((parts[1] === "-=" ? -1 : 1) * end) + start; } e.custom; //如果没有数字化的运算;那么没传入的只能是''; } else { e.custom; } } }); // For JS strict compliance return true; }); },

本文实例讲述了jQuery中animate()方法用法。分享给大家供大家参考。具体分析如下:

此方法用于创建自定义动画,并且能够规定动画执行时长、擦除效果。动画完成后还可以地触发一个回调函数。

animate()方法的使用:

方式一:

以“属性名/值”对象的方式定义动画终止样式属性。例如: 复制代码 代码如下:$.animate

以上代码能够将div从原有的宽度调整到1000px。也可以一次性使用多组“属性名/值”对象。例如: 复制代码 代码如下:$.animate( {width:"1000px",fontSize:20})

以上代码能够将div从原有的宽度调整到1000px,从原有的字体大小调整到20px。需要特别注意以下三点:

1.如果尺寸没有单位,那么默认单位是px。2.属性值需要用双引号包裹,如果属性值是数字的话可以省略。3.类似font-szie或者background-color这样的属性需要去掉中间的中横线,并且第二个单词首字母要大写。

animate()方法可以明确的规定动画效果持续的时间,如果不规定则使用默认值normal。例如:复制代码 代码如下:$.animate( {width:"1000px",fontSize:20},2000)

以上代码规定动画效果在2000毫秒后完成。在动画执行完成后可以调用回调函数。例如: 复制代码 代码如下:$.animate( {width:"1000px"},5000,function

以上代码能够在动画完成以后触发回调函数,于是弹出一个提示框。实例代码:

复制代码 代码如下:

脚本之家

本文由澳门威尼斯人平台发布于澳门威尼斯人平台,转载请注明出处:jQuery中animate方法用法实例-Web前端之家

关键词: