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

来个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稍微提一下：

queue()/dequeue()/clearQueue();

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
	$('#testLink').click(function(){
		/*$("#block1").animate({left:"+=100"},function() {
		    $("#block2").animate({left:"+=100"},function() {
		        $("#block1").animate({left:"+=100"},function() {
		            $("#block2").animate({left:"+=100"},function() {
		                $("#block1").animate({left:"+=100"},function(){
		                    alert("动画结束");
		                });
		            });
		        });
		    });
		});*/
		var FUNC=[
			function() {$("#block1").animate({left:"+=100"},aniCB);},
			function() {$("#block2").animate({left:"+=100"},aniCB);},
			function() {$("#block1").animate({left:"+=100"},aniCB);},
			function() {$("#block2").animate({left:"+=100"},aniCB);},
			function() {$("#block1").animate({left:"+=100"},aniCB);},
			function(){alert("动画结束")}
		];
		alert($.queue($('#demo')[0], "myAnimation",FUNC).length);
		alert($.queue($('#demo')[0], "myAnimation").length);
		var aniCB=function() {
			$('#demo').dequeue("myAnimation");
			alert($('#demo').queue("myAnimation").length);
		}
		aniCB();
	});
})
</script>
</head>
<body>
<a id="testLink" href="javascript:void(0);">click me</a>
<div id="demo">
    <div id="block1"></div>
	<div id="block2"></div>
</div>
</body>

　　

queue()：申明队列，$.queue(element, name, function)或者$(selector).queue(name, function); queueName default "fx";

dequeue()：从队列最前端移除一个队列函数，并执行清除的队列函数；

clearQueue()：清除队列，$.clearQueue();

delay()：延时。

jQuery.fx.off：动画总开关

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

写到这里，突然看到“:animated”这个选择器，匹配所有正在执行动画效果的元素。

总结：

　　jquery的动画的确比较强大了，选择到执行（包括操作和控制，常用的动画又给予了封装）。

　　简单的使用show、hide、等动画方法，通过方法回调可以补充的后续动画或其他操作，如果

配合使用动画，一个对象上动画过多，可以考虑使用queue，提高代码的可读性，这样消除动画跳舞不可控，到达跳舞随你控。

 

posted @ 2015-11-16 14:29  风很大  阅读(255)  评论(0)    收藏  举报