`

解决slideDown()和slideUp()反复执行的问题

阅读更多

【前言】

      二级下滑菜单经常出现的一个问题:当鼠标在菜单上快速滑动时,会如下所示,同时有多个子菜单在不停的显示、隐藏。

【主体】

(1)初始代码:

jQuery(document).ready(function($) {
            $(".main>li").hover(function() {
                $(this).children("ul").slideToggle(400);
            });                                                     
        });

 

(2)解决方案

         这里我给出两种解决方方案:

         ①使用stop()方法来停止重复动画

jQuery(document).ready(function($) {
            $(".main>li").hover(function() {
                $(this).children("ul").slideDown();
            }, function() {
                $(this).children("ul").stop(true,false).slideUp();
            });                                             
 });

         ②使用toggle()方法替代

jQuery(document).ready(function($) {
            $(".main>li").hover(function() {
                $(this).children("ul").toggle();
            });
});

 

 

 

.

  • 大小: 9.2 KB
  • 大小: 9.2 KB
分享到:
评论

相关推荐

    jQuery中slidedown与slideup方法用法示例

    这里结合实例形式总结分析了jQuery中slidedown与slideup方法用法。分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...

    jQuery中slideUp 和 slideDown 的点击事件

    其中,slideUp 和 slideDown 是 jQuery 提供的两种动画方法,用于实现元素的高度变化,进而产生内容的展开或收起的效果。当我们想要通过点击事件来触发动画时,jQuery 的事件监听器就可以派上用场。 在给定的文件中...

    基于jquery的slideDown和slideUp做手风琴

    ### jQuery手风琴菜单的实现 ...以上便是基于jquery的slideDown和slideUp方法来实现手风琴菜单的核心知识和技术要点。通过理解这些知识点,开发者可以更好地掌握使用jQuery实现动态网页交互的技巧。

    微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能示例

    在微信小程序中实现slideUp和slideDown滑动效果就可以利用transform属性的translateY()方法。 transform:translateY()方法的作用是移动元素的垂直位置,它的参数可以是百分比或者是像素。例如,translateY(100%)会...

    让任意view具有滑动效果的SlideUp

    为了解决这些问题,我们通常会使用`ObjectAnimator`或者自定义布局来实现更灵活的滑动效果。 `ObjectAnimator`是Android API 11引入的,它可以对对象的属性进行动画化操作。利用`ObjectAnimator.ofFloat()`方法,...

    使用JQ实现Tab选项卡的切换功能

    使用JS库方法中的slideDown和slideUp实现Tab选项卡的切换

    jQuery动画效果-slideUp slideDown上下滑动示例代码

    除了时长,slide UP和slide DOWN方法还可以接受两个可选的回调函数参数,这两个回调函数分别在动画开始时和动画完成时执行。这为更复杂的动画控制提供了可能,使得开发者能够在动画的不同阶段执行特定的JavaScript...

    slideUp_slideDown_slideToggle

    这通常涉及到JavaScript或jQuery中的几个关键函数,如`slideUp()`, `slideDown()` 和 `slideToggle()`。这些方法是jQuery库提供的强大功能,用于创建平滑的动画效果,使元素以滑动的方式显示或隐藏。在这篇文章中,...

    jQuery动画出现连续触发、滞后反复执行的解决方法

    主要介绍了jQuery动画出现连续触发、滞后反复执行的解决方法,实例分析了针对jQuery中slideUp、slideDown、animate等动画运用时出现的滞后反复执行等问题的解决方法,需要的朋友可以参考下

    easyuijs1.5.2修改下拉框

    easyui combobox 修改下拉框下拉方式为slidedown、slideup

    dom-slider:jQuery的slideToggle(),slideDown()和slideUp()的纯JavaScript版本,但不使用display:无

    它的工作方式类似于jQuery的slideToggle(),slideDown()和slideUp(),但不使用display:none。 使用CSS3过渡和element.scrollHeight设置高度未知的元素的高度的动画。 也是一回事。 特征: 滑动高度已知或...

    jQuery 滑动方法slideDown向下滑动元素

    而`slideToggle()`则根据元素当前的状态(显示或隐藏)来决定是使用`slideDown()`还是`slideUp()`,实现一键切换显示和隐藏的效果。 总结起来,jQuery的`slideDown()`方法是创建向下滑动动画效果的关键工具,结合...

    slideToggle+slideup实现手机端折叠菜单效果

    slideToggle和slideup是jQuery中的两个函数,经常被用来实现折叠菜单效果。下面我们将详细介绍如何使用这两个函数来实现手机端折叠菜单效果。 一、HTML结构 在HTML结构中,我们需要创建一个容器,里面包含了折叠...

Global site tag (gtag.js) - Google Analytics