标签:
.slideUp([duration][,complete])——目标元素向上滑入隐藏;
.slideDown([duration][,complete])——目标元素向下滑出显示;
.slideToggle([duration][,complete])——目标元素隐藏则向下滑出显示,否则向上滑入隐藏;
注:duration为方法执行的时间区间,complete为回调函数。
<!DOCTYPE html> <html lang="zh_CN"> <head> <meta charset="UTF-8"> <title>滑动效果</title> <script src="js/jquery-2.1.3.min.js"></script> <script src="js/slide.js"></script> <style> img{ width:500px; } </style> </head> <body> <div> <div> <button id="btn1">向上划入隐藏</button> <button id="btn2">向下滑出显示</button> <button id="btn3">向上划入隐藏/向下滑出显示</button> </div> <img src="images/2.jpg"/> </div> </body> </html>slide.js代码:
/*滑动效果*/ $(document).ready(function(){ //向上滑入 $('#btn1').click(function(){ $('img').slideUp(2000); }); //向下滑出 $('#btn2').click(function(){ $('img').slideDown(2000); }); //切换滑动 $('#btn3').click(function(){ $('img').slideToggle(2000); }); })
版权声明:本文为博主原创文章,未经博主允许不得转载。
标签:
原文地址:http://blog.csdn.net/bboyjoe/article/details/47385363