jQuery中的动画效果方法用例_jquery中常用的实现动画效果的方法-优快云博客

本文链接：https://blog.youkuaiyun.com/wei_ke_zhi/article/details/82179219

<body>
	<div class="diamond" style="width:100px; height: 100px; background-color: #805cd4;"></div>
	<div class="diamond2" style="width:100px; height: 100px; background-color: #45de32;"></div>
</body>
</html>
<script src="jquery-1.11.3.js"></script>
<script>
	$(function() {
		// show()与hide();
		$(".diamond").hide().show(4000,"linear",function(){console.log("1展示完成")});
		$(".diamond2").hide().show(4000,"swing",function(){console.log("2展示完成")});
		// slideDown()与slideUp()
		$(".diamond").hide().slideDown(4000,"linear", function() {
			console.log("下拉展示完成");
		});
		$(".diamond2").slideUp(4000,"swing", function() {
			console.log("上拉展示完成");
		});
		$(".diamond2").slideToggle(4000,"linear", function() {
			console.log("上下拉切换展示完成");
		});
		fadeIn()、fadeOut()、fadeToggle()、fadeTo()
		$(".diamond").hide().fadeIn(4000,"linear", function() {
			console.log("淡入展示完成");
		});
		$(".diamond2").fadeOut(4000,"swing", function() {
			console.log("淡出展示完成");
		});
		// fadeToggle变化依靠的是一开始的状态，如果是已经显示的状态，那么就会慢慢淡出，也就是说fadeToggle一次只执行一个变化。
		$(".diamond").fadeToggle(4000,"linear", function() {
			console.log("淡入淡出切换展示完成");
		});
		$(".diamond2").fadeTo(4000,0.35,"swing", function() {
			console.log("淡到什么程度展示完成");
		});
		// animate()变化，注意只有数值型样式才能创建动画效果。
		$(".diamond").animate({
			height: "200px",
			width: "200px"
			},4000,"linear", function() {
				console.log("animate用法1展示完成");
		});
		$(".diamond2").animate({
			height: "200px",
			width: "200px"
			},
			{
				duration: 4000,
				easing: "linear",
				complete: function() {
					console.log("animate用法2展示完成");
				}
			});
	});
</script>

着重讲一下animate的用法：

（1）animate(params,[speed],[easing],[fn])

其中，param为一组包含作为动画属性终值样式的属性及其值的集合，每个属性键值对，以逗号（,）隔开

（2）animate(styles,option)

其中，option包含的可选项有：

duration：动画时间//执行animate的时间。

queue：function队列；

step：每次属性调整的回调函数

complete：完成动画的回调函数

start：动画开始的时候调用

always：动画被终止或者意外发生没有执行完时发生。

specialEasing：来自styles参数的一个或多个 CSS 属性的映射，以及它们的对应 easing 函数

$( ".diamond" ).animate({
    width: "toggle",
    height: "toggle"
  }, {
    duration: 4000,
    specialEasing: {
      width: "linear",
      height: "easeOutBounce"
    },
    complete: function() {
      $( this ).after( "<div>Animation complete.</div>" );
    }
  });