2019-8-20 jQuery的动画效果

原创2019-08-20 17:01:0114
摘要:<!DOCTYPE html><html><head><meta charset="UTF-8"><title>动画效果</title><script src="https://code.jquery.com/jquery-3.4.1.js"></script>&

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>动画效果</title>

<script src="https://code.jquery.com/jquery-3.4.1.js"></script>

<style>

div{

width:100px;

height:100px;

background:#00a5e0;

}

</style>

</head>

<body>  

<!-- 1.显示隐藏

hide([speed][sesing] [fn])隐藏

show([speed][sesing] [fn])显示

speed:动画时间  sesing:切换效果

fn:动画完成时执行的一个函数 -->

<button id="btn1">显示</button>

<button id="btn2">隐藏</button>

<div></div>

<hr>

<script>

$(document).ready(function(){

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

$('.box1').show(1000);

})

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

$('.box1').hide(1000);

})

})

</script>


 

<!-- 2.滑动 

slideDown([speed] [fn])下滑动显示

slideUp([speed] [fn])上滑动隐藏

slideToggle([speed] [fn])切换 -->

<button id="btn3">下滑显示</button>

<button id="btn4">上滑隐藏</button>

<button id="btn5">切换</button>

<p>PHP中文网</p>

<p>PHP中文网</p>

<p>PHP中文网</p>

<p>PHP中文网</p>

<p>PHP中文网</p>

<hr>

<script>

$(document).ready(function(){

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

$('.p1').slideDown(2000);

})

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

$('.p1').slideUp(2000);

})

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

$('.p1').slideToggle(2000);

})

})

</script>


<!-- 3.淡入淡出 

fadeIn([speed] [fn])淡入效果

fadeOut([speed] [fn])淡出效果

fadeToggle([speed] [fn])淡入淡出切换

fadeTo([speed] opacity [fn])淡出到指定值 -->

<button id="btn6">淡入</button>

<button id="btn7">淡出</button>

<button id="btn8">切换</button>

<button id="btn9">淡出到指定值</button>

<div></div>

<hr>

<script>

$(document).ready(function(){

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

$('.box2').hide();

$('.box2').fadeIn(2000);

})

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

$('.box2').fadeOut(2000);

})

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

$('.box2').fadeToggle(2000);

})

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

$('.box2').fadeTo(2000,0.2);

})

})

</script>


<!-- 4.自定义动画 

$(selector).animate({params},speed,fn)开始动画

params 参数定义形成动画的 CSS 属性

$(selector).stop(stopAll,goToEnd)停止动画

stopAll 是否清除动画队列

goToEnd 是否立即完成当前动画 -->

<button id="btn10">开始</button>

<button id="btn11">停止</button>

<div style="position: relative;"></div>

<script>

$(document).ready(function(){

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

$('.box3').animate({width:'300px',left:'+500px'},3000);

})

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

$('.box3').stop(true);

})

})

</script>

</body>

</html>



<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>导航</title>

<script src="https://code.jquery.com/jquery-3.4.1.js"></script>

<style>

body{

padding:0;

margin:0;

}

ul{

margin:0 auto;

padding:0;

width: 800px;

height:44px;

}

li{

list-style:none;

width:120px;

height:44px;

float: left;

text-align: center;

line-height: 44px;

background: #111;

color:#fff;

font-size: 14px;

}

a{

text-decoration: none;

color:#fff;

}

</style>

</head>

<body>

<script>

$(document).ready(function(){

$('li').mouseover(function(){

$(this).animate({

opacity:'0.7',

fontSize:'16px'

},300)

})

$('li').mouseleave(function(){

$(this).animate({

opacity:'1',

fontSize:'14px'

},300)

})

})

</script>

<ul>

<li><a href="#">HTML</a></li>

<li><a href="#">CSS</a></li>

<li><a href="#">JAVASCRIPT</a></li>

<li><a href="#">PHP</a></li>

<li><a href="#">MYSQL</a></li>

</ul>

</body>

</html>


批改老师:Peter-Zhu批改时间:2019-08-20 17:30:12
老师总结:自定义动画功能强大, 大多数场景, 预置的动画也能满足的情况下, 尽可能使用预定义的

发布手记

热门词条

第九期线上培训班