jQuery 效果
显示和隐藏
在 jQuery 中可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素，以及使用 toggle() 方法能够切换 hide() 和 show() 方法。
在hide()和show()方法中，我们可以让元素隐藏和显示。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #d1 { width: 100px; height: 100px; background-color: red; } </style> </head> <body> <button id="btn1">隐藏</button> <button id="btn2">显示</button> <div id="d1"></div> </body> <script src="dist/jquery-3.0.0.js"></script> <script> $(()=>{ $("#btn1").click(()=>{ $("#d1").hide(); }), $("#btn2").click(()=>{ $("#d1").show(); }) }) </script> </html>
我们也可以给显示和隐藏加上时间，例如:
$(()=>{
$("#btn1").click(()=>{
$("#d1").hide(2000);
}),
$("#btn2").click(()=>{
$("#d1").show(2000);
})
})
除了时间，我们还可以加上回调函数，例如:
$(()=>{
$("#btn1").click(()=>{
$("#d1").hide(2000,()=>{
alert("隐藏完毕!");
});
}),
$("#btn2").click(()=>{
$("#d1").show(2000,()=>{
alert("显示完毕!");
});
})
})
除了上述的两个方法，还存在一个toggle()方法，可以对显示和隐藏效果进行取反。
$("#btn3").click(()=>{
$("#d1").toggle(1000,()=>{
alert("取反操作执行完毕!");
})
});
淡入淡出
jq当中，提供了四个方法实现淡入淡出，如下:
- fadeIn() 淡入隐藏元素
- fadeOut() 淡出可见元素
- fadeToggle() 淡入淡出效果切换
- fadeTo() 渐变到给定透明度 参数: speed,opacity(0-1),callback
例如:
$(()=>{
$("#btn1").click(()=>{
$("#d1").fadeIn(300, function() {
// "slow"、"fast" 或毫秒。
alert("淡入完毕")
});
})
$("#btn2").click(()=>{
$("#d1").fadeOut(300, function() {
// "slow"、"fast" 或毫秒。
alert('淡出完毕')
});
})
$("#btn3").click(()=>{
$("#d1").fadeToggle(300, function() {
// "slow"、"fast" 或毫秒。
alert('取反完毕')
});
})
$("#btn4").click(()=>{
$("#d1").fadeTo(300,.4, function() {
// "slow"、"fast" 或毫秒。
alert('变化完毕')
});
})
});
滑动效果
jQuery 滑动方法可使元素上下滑动。
- slideDown()
- slideUp()
- slideToggle()
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> * { margin:0; padding:0; } .main { width: 400px; border:2px solid lightblue; /*overflow: hidden;*/ /*height: 50px;*/ } h1 { font-size:25px; width: 100%; height: 50px; background-color: lightblue; line-height: 50px; text-align: center; color: white; } .info { height: 200px; background-color: lightblue; display: none; } </style> </head> <body> <div class="main"> <h1 id="h1">hello,world</h1> <div class="info"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque, ipsa doloribus earum quasi qui dolorum maiores pariatur, quibusdam quidem, consequuntur a soluta deserunt fugit placeat nulla modi, maxime neque tempora. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur soluta qui cum aliquid, perferendis tempore voluptas sapiente nostrum, aperiam voluptatem, eos repellendus iure dicta delectus voluptatibus architecto sed vitae maxime. </div> </div> </body> <script src="dist/jquery-3.0.0.js"></script> <script> $(()=>{ // $("h1").click(()=>{ // $(".info").slideDown(300, function() { // alert("完毕"); // }); // }); // $("h1").click(()=>{ // $(".info").slideUp(300, function() { // alert("完毕"); // }); // }); $("h1").click(()=>{ $(".info").slideToggle(300, function() { alert("完毕"); }); }); }); </script> </html>
动画
jq当中可以通过animate()来实现动画效果，语法如下:
$(selector).animate({params},speed,callback);
例如：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #d1{ width: 80px; height: 50px; font-size: 12px; border:2px solid lightblue; } </style> </head> <body> <div id="d1"> hello,world </div> </body> <script src="dist/jquery-3.0.0.js"></script> <script> $(()=>{ $("#d1").click(()=>{ $("#d1").animate({ "200px", height:"150px" },1000,()=>{ alert("变化完成") }) }); }); </script> </html>
也可以再上一次的基础上继续执行动画:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #d1{ width: 80px; height: 50px; font-size: 12px; border:2px solid lightblue; } </style> </head> <body> <div id="d1"> hello,world </div> </body> <script src="dist/jquery-3.0.0.js"></script> <script> $(()=>{ $("#d1").click(()=>{ let a = $("#d1").animate({ "200px", height:"150px" },1000,()=>{ alert("变化完成") }).animate({ fontSize:"30px" },1000) }); }); </script> </html>
animate()几乎支持所有的css属性，其中设置属性以小驼峰的写法，同时这个方法不支持颜色属性，如果想要支持
颜色属性，需要下载颜色插件:https://plugins.jquery.com/color/
在设置值的时候也可以使用相对值:
$("button").click(function(){
$("div").animate({
left:'250px',
height:'+=150px',
'+=150px'
});
});
停止动画
我们可以通过stop()方法停止动画。
语法如下:
$(selector).stop(stopAll,goToEnd);
jQuery stop() 方法用于停止动画或效果，在它们完成之前。
stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。
可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
因此，默认地，stop() 会清除在被选元素上指定的当前动画。
例如:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> * { margin:0; padding:0; } .main { width: 400px; border:2px solid lightblue; } h1 { font-size:25px; width: 100%; height: 50px; background-color: lightblue; line-height: 50px; text-align: center; color: white; } .info { height: 200px; background-color: lightblue; overflow: hidden; display: none; } </style> </head> <body> <button id="btn1">停止动画</button> <div class="main"> <h1 id="h1">hello,world</h1> <div class="info"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque,
ipsa doloribus earum quasi qui dolorum maiores pariatur, quibusdam quidem,
consequuntur a soluta deserunt fugit placeat nulla modi, maxime neque tempora. </div> </div> </body> <script src="dist/jquery-3.0.0.js"></script> <script> $(()=>{ $("h1").click(()=>{ $(".info").slideToggle(3000, function() { alert("完毕"); }); }); $("#btn1").click(()=>{ $(".info").stop(); }); }); </script> </html>
（未完待续...）