显示与隐藏
- show() 和 hide() 方法
- 动画效果的show() 和 hide()
show(speed,[]callback)
hide(speed,[]callback)
speed：表示执行动画时的速度 [callback]:表示动画完成时的回调函数
- toggle() 方法
该方法就是用来切换元素的可见状态，如果是显示状态，则变成隐藏状态；如果是隐藏状态，则变成显示状态。
形式一：
toggle()
无参数调用
形式二：
toggle(switch)
switch为一个布尔值，即 true 或者 false 。当该值为 true 时显示元素；否则。隐藏。
形式三：
toggle(speed,[callback])
speed为速度。callback为回调函数。
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <script src="../Content/Scripts/bootstrap.min.js"></script> <script src="../Content/Scripts/jquery-3.1.1.min.js"></script> <link href="../Content/bootstrap.css" rel="stylesheet" /> <title></title> <meta charset="utf-8" /> <style type="text/css"> input { margin:8px } div{ margin-left:300px } .clsImg { border:1px solid #ff0000 } </style> <script type="text/javascript"> $(function () { $("input").each(function (index) { $(this).click(function () { //无参数 if (0 == index) { $("div img").toggle(); } //逻辑显示 if (1==index) { $("div img").toggle(0 == index); } //动画显示 if (2==index) { $("div img").toggle(300, function () { $("div img").addClass("clsImg"); }); } }) }) }) </script> </head> <body> <div style="120px"> <div class="divMenu"> <input id="Button1" type="button" value="无参数" class="btn-primary"/> <input id="Button2" type="button" value="逻辑显示" class="btn-primary" /> <input id="Button3" type="button" value="动画显示" class="btn-primary" /> </div> <div> <img src="../Image/5670d8646a4b6.jpg" alt="Alternate Text" style="300px;height:200px"/> </div> </div> </body> </html>
滑动
- slideDown() 与 slideUp()方法
slideDown(speed,[callback]) :图片宽度向下滑动，即显示图片
slideUp(speed,[callback]) :图片宽度向上滑动，即关闭图片
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <meta charset="utf-8" /> <script src="../Content/Scripts/bootstrap.min.js"></script> <script src="../Content/Scripts/jquery-3.1.1.min.js"></script> <link href="../Content/bootstrap.min.css" rel="stylesheet" /> <style type="text/css"> img { width:400px;height:300px; } </style> <script type="text/javascript"> $(function () { var flag = false; var $title = $("#title"); var $tip = $("#divTip"); $title.click(function () { if (!flag) { $("img").slideUp(1000, function () { $tip.html("关闭成功！"); }) $(this).html("显示图片"); flag = true; } else { $tip.html(""); $("img").slideDown(1000); $(this).html("隐藏图片"); flag = false; } }) }) </script> </head> <body> <div class="container"> <div id="title" class="panel-title">隐藏图片</div> <div class="panel-body"> <img src="../Image/5670d8646a4b6.jpg" alt="Alternate Text" /> <div id="divTip"></div> </div> </div> </body> </html>
- slideToggle()方法
slideToggle(speed,[callback]) :图片高的时候关闭，图片关闭的时候，显示（以滑动的形式显隐）
淡入淡出
- fadeLn() 和 fadeOut() 方法
fadeLn(speed,[callback]) fadeOut(speed,[callback])
与show() 和 hide() 方法相比较 fadeIn() 和 fadeOut() 方法相比较，相同之处都是切换元素的显示状态，不同之处在于。前者的动画效果使用元素的width和height属性都会发生改变，而后者只是改变元素的透明度，并不修改其他属性。
- fadeTo() 方法
此方法是用来改变图片的透明度的；
fadeTo(speed,value) speed:改变速度 value:透明度值（取值范围一般0-1）
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <meta charset="utf-8" /> <script src="../Content/Scripts/bootstrap.js"></script> <script src="../Content/Scripts/jquery-3.1.1.js"></script> <link href="../Content/bootstrap.css" rel="stylesheet" /> <style type="text/css"> div { margin:10px } img { margin:10px } </style> <script type="text/javascript"> $(function () { $("select").change(function () { var text = $("select option:selected").text(); $("img").fadeTo(1000,text); }) }) </script> </head> <body class="container"> <div class="col-lg-12"> <div class="col-lg-5 col-lg-offset-3"> <select class="list-group-item col-lg-3 col-lg-offset-4"> <option selected="selected">1.0</option> <option>0.8</option> <option>0.6</option> <option>0.4</option> <option>0.2</option> </select> <img class="col-lg-12 img-thumbnail" src="../Image/5670d8646a4b6.jpg" alt="Alternate Text" /> </div> </div> </body> </html>
自定义动画
- 简单的动画
animate() 方法给开发者自定义各种复杂、高级动画提供了极大的方便和空间。调用方法：
animate(params,[duration],[easing],[callback])
params:表示用于制作动画效果的属性样式和值得集合。
[duration]:表示三种默认的速度字符“slow”、“normal”、“fast”或自定义的数字。
[easing]:为动画插件使用，用于控制动画的表现效果，通常有“linear” 和 “swing”字符值
[callback]:为动画执行完后，执行的回调函数。
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <meta charset="utf-8" /> <script src="../Content/Scripts/jquery-3.1.1.js"></script> <style type="text/css"> img { width:200px; height:150px; } div { margin-left:30%; margin-top:20%; } </style> <script> $(function () { $("img").click(function () { $(this).animate({ "400px", height:"300px" }, 1000, function () { $(this).css("border", "3px solid #666"); }) }) }) </script> </head> <body> <div> <img src="../Image/5670d8646a4b6.jpg" alt="Alternate Text" /> </div> </body> </html>
- 队列中的动画
所谓队列中的动画，是指一个元素执行了一个以上的多个动画效果，即有多个animate()方法在元素中执行，因此，根据这些animate()方法执行的先后顺序，形成了动画的“队列”，产生“队列后，动画的效果便按照“队列”顺序进行展示。
- 动画的停止和延时
stop([clearQueue],[gotoEnd]) ：停止某个方法
clearQueue:一个布尔值，可以为一个函数返回值，什么时候停止。
gotoEnd:也是一个布尔值，同样可以为函数返回值，什么时候开始。
delay(duration,[queueName]) ：延时某个动画的执行
duration：时间值
[queueName]:表示队列名词