摘要：一、总结jquery动画效果章节所有效果带<!DOCTYPE html> <html> <head> <meta charset="U
一、总结jquery动画效果章节所有效果带
<!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('您已经隐藏了');
});
});
});
$('.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>二、使用动画效果制作的导航
<!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>带有动画效果的导航</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>网站首页</li>
<li>关于我们</li>
<li>新闻中心
<ul>
<li>公司新闻</li>
<li>行业新闻</li>
<li>最新动态</li>
<li>要点新闻</li>
</ul>
</li>
<li>产品介绍</li>
<li>工程案例</li>
<li>售后服务</li>
<li>相关知识</li>
<li>人才招聘</li>
<li>在线留言</li>
<li>联系我们</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
老师总结：写的很不错 jQuery实现动画还是很简单的 没事要记得多去练习哦
