How can I animate a hover function that adds a class created by another script?

Question

I am working from an existing template and I have gotten my menu to add the class ulDisplay to the list items and open the whole menu on hover. Now I would like to animate the action instead of it just popping open? The menu is four levels deep so the lines that find the children multiple levels deep are important.

here is the script:

$(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"); 
            })


    });

SORRY SHOULD HAVE ADDED THIS EARLIER:

WHAT I HAVE TRIED SO FAR THAT DOES NOT WORK:

$(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"); 
                })


        });

ALSO I HAVE TRIED:

$(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"); 
                })


        });

AND FINALLY:

$(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"); 
            })


    });

Here is the 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>

A seperate non editable js file creates the class and the html is prttey standard: I will add it to my post — DJERock, Jun 20 '12 at 19:30

Blazemonger · Answer 1 · 2012-06-20T19:18:50.937

0

jQuery UI (core) makes it possible to transition some properties when you add a class.

$(this).find('ul,li').addClass("ulDisplay",1000); // milliseconds

However, if all you're doing is showing and hiding the nested UL blocks, try using .slideToggle() (or separately, .slideDown() and .slideUp()) instead of adding and removing classes.

edited Jun 20 '12 at 19:18

answered Jun 20 '12 at 18:23

Blazemonger

90,923
26
142
180

added in a call to but to no avail... Any other ideas?? – DJERock Jun 20 '12 at 19:15
I am working from a template in which I cannot touch the global files. So I have to add a script onto the HTML to get the desired effect. The navscripts file is what declares the classes ulDisplay, and ulHide. – DJERock Jun 20 '12 at 19:26

score 0 · Answer 2 · edited May 23 '17 at 11:56

0

Use JQuery animations to do what you want. Try using .toggle() function:

 $(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"); 
        })


});

Update

Working with unchangeable template is good most of times but there are some momentes when you are tight up. However not everything is lost! you can use javascript to alter the code, i found this post Pure javascript method to wrap content in a div in the accepted answer you can find this code:

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

I personally found that pretty amazing! and going to write that down somewhere because i think it's very useful. Hope it helps you to.

edited May 23 '17 at 11:56

Community

1
1

answered Jun 20 '12 at 18:28

KoU_warch

2,160
1
25
46

did it work for you? i wrote an example your would need to use toggle with all the items you wish to animate. You can do other animations as well! just check out http://api.jquery.com/animate/ – KoU_warch Jun 20 '12 at 19:08
It is acting strange like buggy, It wants to but just wont stay open for instance when I add .stop().slideToggle(1000); to them it flies open then animates to close. Thanks – DJERock Jun 20 '12 at 19:12
hm.. what about a slight different approach. Instead of hiding each item, put all the item of each menu in a `
` conteiner and then use that div to manage the hover. Something like what i'm going to update the code to – KoU_warch Jun 20 '12 at 19:16
I like the approach but unfortunately... I am working from a template in which I cannot touch the global files. So I have to add a script onto the HTML to get the desired effect. The navscripts file is what declares the classes ulDisplay, and ulHide... The div which styles the container is only editable with the div id="nav-container"> ... I like this and I will play with it maybe by setting a container the same size within a container without mar/pad/bor/etc... Will let you know if it works for sure – DJERock Jun 20 '12 at 19:29

score 0 · Answer 3 · answered Jun 22 '12 at 15:01

OK So I want to thank both of you guys for your insight and help. It really helped to find the answer. here is the code that ended up working:

$(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');
                });


});

Much Thanks to EH_warch and Blazemonger

The problem I found out actually lies within the CSS: See this video: http://jqueryfordesigners.com/video.php?f=animation-jump2.flv This will help folks understand why there is a jump in the animation.

How can I animate a hover function that adds a class created by another script?

3 Answers3