jQuery部分动画

jQuery部分动画

---

---

效果图

一.显示与消失动画

1.body

<input type="button" value="显示/消失" id="put" />
<div id="d1" style="position:absolute;width: 60px;height: 60px;background-color: darkcyan;">1111</div>
<div id="d2" style="position:absolute;width: 60px;height: 60px;top: 100px;background-color: darkgoldenrod;">22222</div>

2.jQuery

$(function(){
				$('#put').click(function(){
					$('#d1').toggle(1000);
					$('#d2').toggle(1000);
					
				});
});

---

二.淡入淡出

1.body

<input type="button" value="淡入/淡出" id="put2" />
<div id="d1" style="position:absolute;width: 60px;height: 60px;background-color: darkcyan;">1111</div>
<div id="d2" style="position:absolute;width: 60px;height: 60px;top: 100px;background-color: darkgoldenrod;">22222</div>

2.jQuery

$(function(){
				$('#put2').click(function(){

					$('#d1').fadeToggle(1000);

					$('#d2').fadeToggle(1000);

				})

});

三.滑动

1.body

<input type="button" value="滑动" id="put3"/>
<div id="d1" style="position:absolute;width: 60px;height: 60px;background-color: darkcyan;">1111</div>
<div id="d2" style="position:absolute;width: 60px;height: 60px;top: 100px;background-color: darkgoldenrod;">22222</div>

2.jQuery

$(function(){
				$('#put3').click(function(){
					$('#d1').slideToggle(1000,function(){
						$('#d2').slideToggle(1000);
					});
					
				})

});

---

四.动画

1.body

<input type="button" value="动画" id="put4" />
<div id="d1" style="position:absolute;width: 60px;height: 60px;background-color: darkcyan;">1111</div>
<div id="d2" style="position:absolute;width: 60px;height: 60px;top: 100px;background-color: darkgoldenrod;">22222</div>

2.jQuery

$(function(){
				$('#put4').click(function(){
					$('#d1').animate({
						left: "300px",
						fontSize: '2em'
					},1000);
					$('#d2').animate({top: "300px",left: "250px"},1000);
					$('#d2').animate({width: "90px",fontSize: '2em'},1000);
				})

});

5.归位（仅用于动画结束）

1.body

<input type="button" value="归位" id="put5" />
<div id="d1" style="position:absolute;width: 60px;height: 60px;background-color: darkcyan;">1111</div>
<div id="d2" style="position:absolute;width: 60px;height: 60px;top: 100px;background-color: darkgoldenrod;">22222</div>

2.jQuery

$(function(){
				$('#put5').click(function(){
					$("#d1").animate({
						left: "5px",
						fontSize: "20px"
					},1000);
					$("#d2").animate({
						top: "100px",
						left: "5px",
						width: "60px",
						fontSize: "20px"
					},1000)
				})

});

六.小结

本章概述了jQuery中的部分动画效果，感兴趣的小伙伴可以继续自行探索。

有哪里不足或者有更好的建议，欢迎留言吐槽，有哪里不懂的小伙伴可以私信我，我会一一答复，感谢认可，感谢支持！