关于JQuery animate()方法

Posted 2020-10-05 前端小记

html:

        <button>点击我</button>
	<p>如果你想在一个涉及动画的函数之后来执行语句，请使用callback函数</p>

	<div class="panel"></div>
	<div class="content"></div>    

css部分：

注意：使用animate函数时，为了能够影响元素的 top bottom left right 属性值，需先将position属性值设置为 relative 或者 absolute　

            .panel {
			width: 100px;
			height: 100px;
			border: 1px solid #0050d0;
			background: red;
			cursor: pointer;
			position: relative;
		}

		.content {
			width: 100px;
			height: 100px;
			margin-top: 20px;
			background: green;
		}        

 如果在500之前加上 += 或 -= 代表在当前位置递增或者递减　

        $(".panel").click(function() {
			$(this).animate({left: "+=500"},3000);//递增
         })  

同时执行多个动画

$(this).animate({left: "500", top: "200"},3000);

按顺序执行动画 -- 动画队列

 $(this).animate({left: "500"},3000);
 $(this).animate({top: "200"},3000);

以上可改为 链式写法

$(this).animate({left: "500px"},3000).animate({top: "200px"}, 3000);

 综合动画
 透明度可以用小数，用百分数无效

$(this).animate({left: "500px", height: "200px", opacity: "0.5"},3000).animate({top: "200px", width: "200px"},3000).fadeOut("slow");

 给hover 事件添加 stop() 方法 可解决移入移出动作过快 导致光标动作与动画效果不一致的问题
注意： 移入移出都需要添加stop()

$(".panel").hover(function() {
 		$(this).stop().animate({height: "150",width: "300"},3000)
 	},function(){
 		$(this).stop().animate({height: "22",width: "60"},3000)
 	})

当遇到的是组合动画的时候

                    $(".panel").hover(function() {
				$(this).stop()
					.animate({height: "150"},3000)//如果此时光标移出

					.animate({width: "300"},3000)//执行这个动画 而不是下面移出的动画
			},function(){
				$(this).stop()
					.animate({height: "22"},3000)
					.animate({width: "60"},3000)
			})            

把stop()第一个参数设置为true ，可以解决上面的问题，跳过width为300的样式改变 执行鼠标移出事件

                    $(".panel").hover(function() {
				$(this).stop(true)
					.animate({height: "150"},3000)//如果此时光标移出

					.animate({width: "300"},3000)//执行下面移出的动画
			},function(){
				$(this).stop(true)
					.animate({height: "22"},3000)
					.animate({width: "60"},3000)
			})

如果stop()第二个参数也设置为true的时候,可以直接到达结束时候的状态