小白的jquery学习之路之天猫04 效果 fadeTo animate方法天猫图片滑动效果

本文链接：https://blog.csdn.net/weixin_37770640/article/details/80595590

效果

淡入淡出
- fadeTo([[s],o,[e],[fn]])
- // 图片的透明度在2秒时间到0.3
  $("#dog").fadeTo(2000,0.3);
- fadeToggle([s,[e],[fn]])
自定义
- animate(p,[s],[e],[fn])^1.8*
- //在多久之内将图片的width left height属性设为相应的值
- .animate({'height':'100px','width':100px},3000)
- stop([c],[j])^1.7*

<html>
<head>
	<style type="text/css">
	#dan{
		height: 100px;width: 100px;position: relative;left: 0px;top:0px;
	}
	#qiang{
		height: 100px;width: 20px;position: relative;left: 1000px;top:0px;
	}
	#box1{
		height: 100px;width: 100px;background-color: #F00;
	}

	#box2{
		height: 400px;width: 400px;border: solid;position: relative;left: 0px;top: 0px;
	}
	#box2 .dog{
		height: 100px;width: 100px;position: absolute;left:0px;bottom:0px;
	
	}

	</style>
	<!--引入jquery文件 -->
<script src="jquery.js"></script>
<script type="text/javascript">
   

$(function(){
	$("#btn").click(function(){
		$("#dan").animate({'left':'1000px'},3000)
	})
	$("#box1").click(function(){
		$(this).animate({'height':'200px','width':'200px'},3000)
	})
	$("#box2").mouseenter(function(){
		$("#box2 .dog").stop().animate({'left':'170px'},3000)
	})
    $("#box2").mouseleave(function(){
		$("#box2 .dog").stop().animate({'left':'0px'},3000)
	})
    

})

</script>

</head>
<body>
<input type="button" id="btn" value="点我！！！！！">  
</br></br>
<img src="dog.jpg" id="dan" style="left:0px;">
<img src="qiang.jpg" id="qiang" >
</br></br>
<div id="box1"></div>
<div id="box2">
	<img src="dog.jpg" class="dog">
</div>
</body>
</html>

$("#box2 .dog").stop().animate({'left':'170px'},3000)在这里stop()的作用是让没执行完的就不执行了，执行下一个操作

在这里this的作用是 将移入鼠标那个box2的.dog执行下列操作

$(".box2").mouseenter(function(){
		$(this).find(".dog").stop().animate({'left':'170px'},3000)
	})
    $(".box2").mouseleave(function(){
		$(this).find(".dog").stop().animate({'left':'0px'},3000)
	})