Jquery 如何为添加由另一个脚本创建的类的悬停函数设置动画？

我正在使用一个现有的模板，我已经获得了我的菜单，可以将类ulDisplay添加到列表项中，并在悬停时打开整个菜单。现在我想动画的行动，而不是它只是弹出打开？菜单有四层深，因此找到多层深的子菜单的行很重要

以下是脚本：

$(document).ready(function() {


        $('ul#nav-primary').hover(function() { 

                $(this).addClass("ulDisplay");
                $(this).find('ul,li').removeClass("ulHide");
                $(this).find('ul,li').addClass("ulDisplay");

            },

        function() { 
            $('ul#nav-primary').removeClass("ulDisplay"); 
            $('ul#nav-primary').find('ul,li').removeClass("ulDisplay");
            $('ul#nav-primary li').find('ul,li').addClass("ulHide"); 
            })


    });

抱歉，您应该在之前添加此内容：

到目前为止，我尝试过但不起作用的方法：

$(document).ready(function() {


            $('ul#nav-primary').hover(function() { 
                    $(this).slideToggle('normal');
                    $(this).find('ul,li').removeClass("ulHide");
                    $(this).find('ul,li').addClass("ulDisplay");
                },

            function() {  
                $('ul#nav-primary').slideToggle('normal');
                $('ul#nav-primary li').find('ul,li').removeClass("ulDisplay");
                $('ul#nav-primary li').find('ul,li').addClass("ulHide"); 
                })


        });

我也尝试过：

$(document).ready(function() {


            $('ul#nav-primary').hover(function() { 

                    //$(this).addClass("ulDisplay");
                    $('ul#nav-primary li').find('ul,li').removeClass("ulHide");
                    $('ul#nav-primary li').find('ul,li').addClass("ulDisplay").stop(true, true).slideToggle(1000);

                },

            function() { 
                //$('ul#nav-primary').removeClass("ulDisplay"); 
                $('ul#nav-primary li').find('ul,li').removeClass("ulDisplay").stop(true, true).slideToggle(1000);
                $('ul#nav-primary li').find('ul,li').addClass("ulHide"); 
                })


        });

最后：

$(document).ready(function() {


        $('ul#nav-primary').hover(function() { 

                //$(this).addClass("ulDisplay");
                $('ul#nav-primary li').find('ul,li').removeClass("ulHide");
                $('ul#nav-primary li').find('ul,li').addClass("ulDisplay", 1000);

            },

        function() { 
            //$('ul#nav-primary').removeClass("ulDisplay"); 
            $('ul#nav-primary li').find('ul,li').removeClass("ulDisplay", 1000);
            $('ul#nav-primary li').find('ul,li').addClass("ulHide"); 
            })


    });

以下是HTML：

<div id="nav">
    <h3><a href="/TemplatePackage/subtopic/B/index.html">Topic Homepage</a></h3>
    <ul id="nav-primary">
        <li><a href="#">Level 1</a>
            <ul>
                <li><a href="#">Level 2</a>
                    <ul>
                        <li><a href="#">Level 3</a>
                            <ul>
                                <li><a href="#">Level 4 - Item 1</a></li>
                                <li><a href="#">Level 4 - Item 2</a></li>
                                <li><a href="#">Level 4 - Item 3</a></li>
                                <li><a href="#">Level 4 - Item 4</a></li>
                                <!--<li><a href="/TemplatePackage/subtopic/B/basic_info/screening/level4.html#5">Level 4 - Item 5</a></li>-->
                            </ul>
                        </li>
                        <li><a href="#">Level 3</a></li>
                        <li><a href="#">Level 3</a></li>
                        <li><a href="#">Level 3</a></li>
                    </ul>
                </li>
                <li><a href="#">Level 2</a></li>
                <li><a href="#">Level 2</a></li>
                <li><a href="#">Level 2</a></li>
                <li><a href="#">Level 2</a></li>
                <li><a href="#">Level 2</a></li>
            </ul>
        </li>
        <li><a href="#">Level 1</a>
            <ul>
                <li><a href="#">Level 2</a><ul>
                    <li><a href="#">Level 3</a>
                            <ul>
                                <li><a href="#">Level 4</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="#">Level 1</a>
            <ul>
                <li><a href="#">Level 2</a></li>
            </ul>
        </li>
        <li><a href="#">Level 1</a></li>
        <li><a href="#">Level 1</a></li>
        <li><a href="#">Level 1</a></li>
    </ul>
</div>
<div class="bottom"></div>

jQuery UI（核心）使您能够

---

但是，如果您所做的只是显示和隐藏嵌套的UL块，请尝试使用

.slideToggle（）

（或者单独使用

.slideDown（）

和

.slideUp（）

）而不是添加和删除类。

使用JQuery动画来完成您想要的操作。尝试使用

.toggle（）

函数：

 $(document).ready(function() {


    $('#primaryMenu').hover(function() { 

            $(this).toggle('fast');
            //$(this).find('ul,li').removeClass("ulHide");
            //$(this).find('ul,li').addClass("ulDisplay");

        },

    function() { 
        $('#primaryMenu').toggle('fast'); 
        //$('ul#nav-primary').find('ul,li').removeClass("ulDisplay");
        //$('ul#nav-primary li').find('ul,li').addClass("ulHide"); 
        })


});

更新

大多数情况下，使用不可更改的模板是很好的，但也有一些时候你手头紧。然而，并不是所有的东西都丢了！您可以使用javascript修改代码，我在接受的答案中找到了这篇文章，您可以找到以下代码：

 org_html = document.getElementById("slidesContainer").innerHTML;
 new_html = "<div id='slidesInner'>" + org_html + "</div>";
 document.getElementById("slidesContainer").innerHTML = new_html;

org\u html=document.getElementById（“SlideContainer”）.innerHTML；
新建_html=“”+组织_html+”；
document.getElementById（“SlideContainer”）.innerHTML=new\uHTML；

---

我个人觉得这很了不起！我想把它写在某个地方，因为我觉得它非常有用。希望它能帮助你。

好的，我要感谢你们两位的洞察力和帮助。找到答案真的很有帮助。以下是最终有效的代码：

$(document).ready(function() {  

     $('ul#nav-primary').find('li').hover(function() {   
          $(this).children('ul').slideDown('normal');
          $(this).children('ul').removeClass('ulHide');
          $(this).children('ul').addClass('ulDisplay');
          $(this).children('ul').children('li').removeClass('ulHide');
          $(this).children('ul').children('li').addClass('ulDisplay');
                });


});

非常感谢EH_warch和Blazemonger

我发现的问题实际上存在于CSS中：请看以下视频：

---

这将有助于人们理解动画中出现跳跃的原因。

这对你有用吗？我编写了一个示例，您需要对所有希望设置动画的项目使用切换。你也可以做其他动画！只需检查一下它的行为是否像童车一样奇怪，它想保持打开状态，但就是不想保持打开状态，例如，当我添加.stop（）.slideToggle（1000）；对他们来说，它会飞开然后动画关闭。谢谢。。换一种稍微不同的方法怎么样。不要隐藏每个项目，而是将每个菜单的所有项目放在

上下文中，然后使用该div管理悬停。类似于我将要更新的代码，我喜欢这种方法，但不幸的是。。。我使用的模板无法接触全局文件。因此，我必须在HTML中添加一个脚本以获得所需的效果。navscripts文件声明了类ulDisplay和ulHide。。。设置容器样式的div仅可使用div id=“nav container”>。。。我喜欢这个，我会玩它，可能通过在没有mar/pad/bor/等的容器中设置相同大小的容器。。。将让您知道它是否适用于sureadded在呼叫中添加到，但无效。。。还有其他想法吗？我使用的模板无法接触全局文件。因此，我必须在HTML中添加一个脚本以获得所需的效果。navscripts文件是声明类ulDisplay和ulHide的文件。如果您发布相关的CSS和HTML，它可能会帮助我们。一个单独的不可编辑的js文件创建类，HTML是prttey标准：我会将其添加到我的帖子中

$(document).ready(function() {  

     $('ul#nav-primary').find('li').hover(function() {   
          $(this).children('ul').slideDown('normal');
          $(this).children('ul').removeClass('ulHide');
          $(this).children('ul').addClass('ulDisplay');
          $(this).children('ul').children('li').removeClass('ulHide');
          $(this).children('ul').children('li').addClass('ulDisplay');
                });


});