JQuery--基础动画滑动动画淡入淡出动画自定义动画
Posted QinXiao.Shou
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JQuery--基础动画滑动动画淡入淡出动画自定义动画相关的知识，希望对你有一定的参考价值。
1 /** 2 * 【JQ基础动画】 3 * show() 显示 4 * hide() 隐藏 5 * toggle() 切换 6 * 默认无动画，如果要产生动画 7 * 在括号内，添加毫秒数，可产生动画和控制动画的快慢 8 * 9 * 《滑动动画》 10 * slideDown() 滑动显示(下) 11 * slideUp() 滑动隐藏(上) 12 * slideToggle 滑动切换 13 * 默认有动画，默认是400毫秒 14 * 《淡入淡出动画》 15 * fadeIn() 淡入显示 16 * fadeOut() 淡出显示 17 * fadeToggle() 切淡 18 * fadeTo(时间,透明度) 设置透明度 19 */
一.基础动画
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script src="lib/jquery-1.12.2.js"></script> 7 <script> 8 $(function () { 9 $(‘button:eq(0)‘).click(function () { 10 $(‘img‘).show(1000); 11 }); 12 13 $(‘button:eq(1)‘).click(function () { 14 $(‘img‘).hide(1000); 15 }); 16 17 $(‘button:eq(2)‘).click(function () { 18 $(‘img‘).toggle(1000); 19 }); 20 }); 21 </script> 22 </head> 23 <body> 24 <button>显示</button> 25 <button>隐藏</button> 26 <button>切换</button><br/> 27 <img src="images/1.gif" > 28 </body> 29 </html>
二.滑动动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: 200px;
height: 400px;
background-color: pink;
}
</style>
<script src="lib/jquery-1.12.2.js"></script>
<script>
$(function () {
$(‘button‘).eq(0).click(function () {
$(‘.box‘).slideDown();
});
$(‘button‘).eq(1).click(function () {
$(‘.box‘).slideUp();
});
$(‘button‘).eq(2).click(function () {
$(‘.box‘).slideToggle();
});
});
</script>
</head>
<body>
<button>显示</button>
<button>隐藏</button>
<button>切换</button>
<br>
<!--<img src="images/1.gif" width="150" height="440">-->
<div class="box"></div>
</body>
</html>
三.淡入淡出动画
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .box{ 8 width: 200px; 9 height: 400px; 10 background-color: pink; 11 } 12 </style> 13 <script src="lib/jquery-1.12.2.js"></script> 14 <script> 15 $(function () { 16 $(‘button‘).eq(0).click(function () { 17 $(‘.box‘).fadeIn(); 18 }); 19 $(‘button‘).eq(1).click(function () { 20 $(‘.box‘).fadeOut(); 21 }); 22 $(‘button‘).eq(2).click(function () { 23 $(‘.box‘).fadeToggle(1000); 24 }); 25 $(‘button‘).eq(3).click(function () { 26 $(‘.box‘).fadeTo(400,0.3); 27 }); 28 }); 29 </script> 30 </head> 31 <body> 32 <button>显示</button> 33 <button>隐藏</button> 34 <button>切换</button> 35 <button>透明度</button> 36 <br> 37 <!--<img src="images/1.gif" width="150" height="440">--> 38 <div class="box"></div> 39 </body> 40 </html>
四.自定义动画
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .main{ 8 width: 100px; 9 height: 100px; 10 background-color: pink; 11 /*transition: all .4s;*/ 12 } 13 </style> 14 <script src="lib/jquery-1.12.2.js"></script> 15 <script> 16 $(function () { 17 /** 18 * 自定义动画(兼容IE678.) 19 * 其实JQ的动画也可以通过CSS3实现，但是CSS3会有兼容问题 20 * 移动端项目的时候，直接使用CSS3实现效果即可 21 * PC端要考虑低版本浏览器兼容，可以使用JQ的animate函数 22 * 23 * 有动画的属性： 24 * 值是数字的属性：（颜色，文本居中这些就实现不了） 25 * 核心函数 26 * .animate({属性集合}) 27 * 28 * */ 29 30 31 32 //（颜色，文本居中这些就实现不了动画） 33 $(‘button‘).click(function () { 34 $(‘.main‘).animate({ 35 "width":"300px", 36 "height":"300px", 37 "backgroundColor":"#f90", 38 "textAlign":"center", 39 "lineHeight":"300px" 40 },300); 41 }); 42 }); 43 </script> 44 </head> 45 <body> 46 <button>动起来</button> 47 <div class="main"> 48 文字行号 49 </div> 50 </body> 51 </html>
以上是关于JQuery--基础动画滑动动画淡入淡出动画自定义动画的主要内容，如果未能解决你的问题，请参考以下文章
09.11 jquery04 效果 基本 滑动滑出 淡入淡出 自定义动画 动画操作 工具 浏览器 对象和属性操作核心
JQuery: JQuery效果（隐藏显示切换，滑动，淡入淡出，以及动画）