jQuery滑动效果
【前言】
今天学生问了道之前讲过的问题,二级菜单下滑效果。只是告诉他jQuery的slide类方法控制,下面做下总结
二级下拉菜单,只要理解原理其实很简单。
知识点:>子代选择器
分享下步骤:http://www.cnblogs.com/jianxian/p/8685593.html
【案例】
//动态划入划出 $('.nav_ul>li').hover(function() { $(this).find('ul').slideDown(200); }, function() { $(this).find('ul').slideUp(100); });
【列表】
(1)下滑
(2)上滑
(3)上下滑切换
【详解】
(1)下滑
$(selector).slideDown(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。
<script src="/jquery/jquery-1.11.1.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".flip").click(function(){ $(".panel").slideDown("slow"); }); }); </script> <style type="text/css"> div.panel,p.flip{ margin:0px; padding:5px; text-align:center; background:#e5eecc; border:solid 1px #c3c3c3; } div.panel{ height:120px; display:none; } </style> <div class="panel"> <p>W3School - 领先的 Web 技术教程站点</p> <p>在 W3School,你可以找到你所需要的所有网站建设教程。</p> </div> <p class="flip">请点击这里</p>
(2)上滑
$(selector).slideUp(speed,callback);
(3)切换
jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。
如果元素向下滑动,则 slideToggle() 可向上滑动它们。
如果元素向上滑动,则 slideToggle() 可向下滑动它们。
<script src="/jquery/jquery-1.11.1.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".flip").click(function(){ $(".panel").slideToggle("slow"); }); }); </script> <style type="text/css"> div.panel,p.flip{ margin:0px; padding:5px; text-align:center; background:#e5eecc; border:solid 1px #c3c3c3; } div.panel{ height:120px; display:none; } </style> <div class="panel"> <p>W3School - 领先的 Web 技术教程站点</p> <p>在 W3School,你可以找到你所需要的所有网站建设教程。</p> </div> <p class="flip">请点击这里</p>
.
相关推荐
EdwardSiCong 2020-11-23
85477104 2020-11-17
hhanbj 2020-11-17
81427005 2020-11-11
seoppt 2020-09-13
honeyth 2020-09-13
WRITEFORSHARE 2020-09-13
84483065 2020-09-11
momode 2020-09-11
85477104 2020-08-15
83510998 2020-08-08
82550495 2020-08-03
tthappyer 2020-08-03
84901334 2020-07-28
tthappyer 2020-07-25
TONIYH 2020-07-22
tztzyzyz 2020-07-20
83510998 2020-07-18
81463166 2020-07-17