jquery动画animate

最近我们强大的前端（切页超级麻利，手起刀落，但js比较弱）在处理各个hover click等动画时，各种被坑，好吧，我来填坑。

我单从jquery入手吧，看一下API

show、hide这对没有什么好说；

toggle：以前用的很爽，现在居然废除了，可能是toggle切换可能定义n多function，导致代码的可读性太差，jquery麻利的砍掉了，当然我们可以扩展：

;(function(){
	$.extend($.fn, {
		toggle:function(){
			var _$this = $(this);
			if(_$this.is(‘:visible‘)){_$this.hide()}else{_$this.show()};
		}
	});
})(jQuery);

slideDown()：逐步向下增大动态显示；

slideUp()：逐步向上减小动态隐藏；

slideToggle()：通过高度变化来切换显示和隐藏；

fadeIn()：逐步改变不透明度的变化来显示；

fadeOut()：逐步改变不透明度的变化来隐藏

fadeTo()：逐步改变不透明度的变化来到达某个指定的透明度；

fadeToggle()：逐步切换透明度；

重点终于来了，哈哈：animate。

animate：自定义动画。

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

• properties
  Type: PlainObject
  An object of CSS properties and values that the animation will move toward.
• duration (default: 400)
  Type: Number or String
  A string or number determining how long the animation will run.
• easing (default: swing)
  Type: String
  A string indicating which easing function to use for the transition.
• complete
  Type: Function()
  A function to call once the animation is complete, called once per matched element.

.animate( properties, options )

properties:

• backgroundPosition
• borderWidth
• borderBottomWidth
• borderLeftWidth
• borderRightWidth
• borderTopWidth
• borderSpacing
• margin
• marginBottom
• marginLeft
• marginRight
• marginTop
• outlineWidth
• padding
• paddingBottom
• paddingLeft
• paddingRight
• paddingTop
• height
• width
• maxHeight
• maxWidth
• minHeight
• minWidth
• font
• fontSize
• bottom
• left
• right
• top
• letterSpacing
• wordSpacing
• lineHeight
• textIndent

来个demo:

$(‘.column_item‘).mouseenter (function(){
　　var thisId = $(this).attr(‘id‘);
　　var $contentDiv = $(‘#‘+thisId+‘ .column_text_begin‘);
　　var $line = $contentDiv.find(‘b‘);
　　var $text = $(‘#‘+thisId+‘ .btn_position‘);
   $text.stop(true, true).fadeIn(‘fast‘);
   $contentDiv.stop(true, true).animate({top: ‘-=50px‘}, 500);
   $line.stop(true, true).animate({width: 40, opacity:‘show‘}, 500);
}).mouseleave(function(){
   var thisId = $(this).attr(‘id‘);
   var $contentDiv = $(‘#‘+thisId+‘ .column_text_begin‘);
   var $line = $contentDiv.find(‘b‘);
   var $text = $(‘#‘+thisId+‘ .btn_position‘);
   $contentDiv.stop(true, true).animate({top: ‘+=50px‘}, 400);
   $line.stop(true, true).animate({width: 2,opacity:‘hide‘}, 300);
   $text.stop(true, true).fadeOut();
});

$line.stop(true, true).animate({width: 2,opacity:‘hide‘}, 300);

properties中number类型可以直接“+”、“-”运算；

opacity设置透明度。同理height:"toggle"，表示切换高度；

stop()：停止所有在指定元素上正在运行的动画。

应该很少有立马停止动画非结算的情况吧，看：

gotoEnd:让当前正在执行的动画立即完成，并且重设show和hide的原始样式，调用回调函数等。

所以， 我用$selector.stop(true, true);

finish：完成。

官方给出的提示：.finish()方法和.stop(true, true)很相似，.stop(true, true)将清除队列，并且目前的动画跳转到其最终值。但是，不同的是，.finish() 会导致所有排队的动画的CSS属性跳转到他们的最终值

有关queue放在下一篇里讲吧。

delay()：延时。

jQuery.fx.off：动画总开关

jQuery.fx.insterval：设置动画的显示帧速，这个目前没有用过，用到了再补充吧

配合使用动画，方可消除动画跳舞不可控，到达跳舞随你控。

jquery动画animate

原文：http://www.cnblogs.com/jlma/p/4968809.html