摘要：一、總結(jié)jquery動畫效果章節(jié)所有效果帶<!DOCTYPE html> <html> <head> <meta charset="U
一、總結(jié)jquery動畫效果章節(jié)所有效果帶
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>jquery動畫效果</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<style>
.box {
float: left;
width: 100px;
margin: 10px 10px;
}
.box1, .box2, .box3, .box4, .box5, .box6, .box7, .box8, .box9, .box10, .box11 {
width: 100px;
height: 100px;
background: red;
margin-top: 6px;
color: #fff;
font-size: 12px;
position: absolute;
}
.btn1, .btn2, .btn3, .btn4, .btn5, .btn6, .btn7, .btn8, .btn9, .btn10, .btn11, .btn12 {
border: none;
width: 100px;
height: 30px;
background: #ff6500;
color: #fff;
line-height: 30px;
}
#box {
float: left;
position: absolute;
top: 200px;
left: 16px;
}
</style>
</head>
<body>
<div>
<button>點我隱藏</button>
<div></div>
</div>
<div>
<button>點我顯示</button>
<div></div>
</div>
<div>
<button>點我向下滑動</button>
<div></div>
</div>
<div>
<button>點我向上滑動</button>
<div></div>
</div>
<div>
<button>滑動切換</button>
<div></div>
</div>
<div>
<button>點我淡入</button>
<div></div>
</div>
<div>
<button>點我淡出</button>
<div></div>
</div>
<div>
<button>淡入淡出切換</button>
<div></div>
</div>
<div>
<button>淡出到指定值</button>
<div></div>
</div>
<div>
<button>自定義動畫</button>
<div>自定義動畫</div>
</div>
<div id="box">
<button>向右運動</button>
<button>停止</button>
<div></div>
</div>
</div>
<script>
$(document).ready(function() {
$('.btn1').click(function() {
$('.box1').hide(1500,
function() {
alert('您已經(jīng)隱藏了');
});
});
});
$('.box2').hide();
$('.btn2').click(function() {
$('.box2').show(1500);
});
$('.box3').hide();
$('.btn3').click(function() {
$('.box3').slideDown(1000);
});
$('.btn4').click(function() {
$('.box4').slideUp(1000);
});
$('.btn5').click(function() {
$('.box5').slideToggle(1000);
});
$('.box6').hide();
$('.btn6').click(function() {
$('.box6').fadeIn(1500);
});
$('.btn7').click(function() {
$('.box7').fadeOut(1500);
});
$('.btn8').click(function() {
$('.box8').fadeToggle(1500);
});
$('.btn9').click(function() {
$('.box9').fadeTo(1500, 0.1);
});
$('.btn10').click(function() {
$('.box10').animate({
fontSize: '30px',
width: 'toggle'
}, 1500);
});
$('.btn11').click(function() {
$('.box11').animate({
left: '500px'
}, 3000);
$('.box11').animate({
opacity: '0.3'
}, 3000);
});
$('.btn12').click(function() {
$('.box11').stop(false, true);
})
</script>
</body>
</html>二、使用動畫效果制作的導(dǎo)航
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>帶有動畫效果的導(dǎo)航</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
div {
width: 100%;
height: 40px;
line-height: 40px;
background: #029cff;
}
.main {
width: 1200px;
margin: 0 auto;
}
.main li {
float: left;
list-style: none;
width: 120px;
text-align: center;
color: #fff;
}
.main li:hover {
color: #000;
background: #fff;
}
.smallnav li {
list-style: none;
width: 120px;
background: #029cff;
}
</style>
</head>
<body>
<div>
<ul>
<li>網(wǎng)站首頁</li>
<li>關(guān)于我們</li>
<li>新聞中心
<ul>
<li>公司新聞</li>
<li>行業(yè)新聞</li>
<li>最新動態(tài)</li>
<li>要點新聞</li>
</ul>
</li>
<li>產(chǎn)品介紹</li>
<li>工程案例</li>
<li>售后服務(wù)</li>
<li>相關(guān)知識</li>
<li>人才招聘</li>
<li>在線留言</li>
<li>聯(lián)系我們</li>
</ul>
</div>
<script>
$('.smallnav').hide();
$('.nav3').mouseenter(function() {
$('.smallnav').fadeIn(1500);
});
$('.nav3').mouseleave(function() {
$('.smallnav').fadeOut(1500);
})
</script>
</body>
</html>
批改老師：韋小寶批改時間：2019-02-25 17:42:59
老師總結(jié)：寫的很不錯 jQuery實現(xiàn)動畫還是很簡單的 沒事要記得多去練習(xí)哦