返回 2019-8-...... 登陆

2019-8-20 jQuery的动画效果

辰晨 2019-08-20 17:01:01 468

<!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>


最新手记推荐

• 用composer安装thinkphp框架的步骤 • 省市区接口说明 • 用thinkphp,后台新增栏目 • 管理员添加编辑删除 • 管理员添加编辑删除

全部回复(0)我要回复

暂无评论~
  • 取消 回复 发送
  • PHP中文网