Animation on hover

csosa · October 26, 2015, 10:42pm

Hi I am trying to animate my dropdown menu on hover using
animate.css and I am using this script to make it function on hover
but it does not work not sure if I am missing something or if it is wrong:
Website

$(document).ready(function(){
    $('#products-drop').each(function() {
        animationHover(this, 'fadeIn');
    });
});
    
    function animationHover(element, animation){
    element = $(element);
    element.hover(
        function() {
            element.addClass('animated ' + animation);        
        },
        function(){
            //wait for animation to finish before removing classes
            window.setTimeout( function(){
                element.removeClass('animated ' + animation);
            }, 2000);         
        });
}

HTML:

 <ul id="products-drop" class="animated fadeIn">
                         <li><a href="/shocklabels.html"><span class="icon-shocklabelsicon-01"></span>Shock Indicator Labels</a></li>
                            <li><a href="/tiltindicator.html"><span class="icon-tiltindicator-01"></span>Tilt Indicator Label</a></li>
                            <li><a href="/protectapak.html"><span class="icon-protectapakicon-01"></span>Protect-A-Pak</a></li>
                            <li><a href="/omnig.html"><span class="icon-omnigicon-01"></span>OMNI-G</a></li>
                            <li><a href="/omnigws.html"><span class="icon-omnigicon-01"></span>OMNI-GWS</a></li>
                            <li><a href="/shockfuse.html"><span class="icon-shockfuseicon-01"></span>Shock Fuse</a></li>
                            <li><a href="/transmonitor.html"><span class="icon-transmonitoricon"></span>Transmonitor</a></li>
                            <li><a href="/transmonitortd.html"><span class="icon-transtdicon-01"></span>Transmonitor TD</a></li>
                            <li><a href="/impactographanalog.html"><span class="icon-iogicon-01"></span>Impact-O-Graph</a></li>
                            <li><a href="/digishock.html"><span class="icon-digishockicon-01"></span>Digi-Shock</a></li>
                        </ul>

it currently functions on pageload

PaulOB · October 27, 2015, 1:49pm

There seems to be an error in the console at lines 15 and 20 in bootsrtap.js.
Uncaught ReferenceError: fadeIn is not defined

element.hover(
        function() {
            element.addClass('animated ' + fadeIn);        
        },
        function(){
            //wait for animation to finish before removing classes
            window.setTimeout( function(){
                element.removeClass('animated ' + fadeIn);
            }, 4000);         
        });

I suggest you fix that first.

csosa · October 27, 2015, 3:40pm

Yeah I forgot to remove that its
gone now.

PaulOB · October 27, 2015, 6:08pm

It is working but probably not as you expected.

You have added the ‘fadein’ effect to the ul but the dowpdown is shown when you hover over the list parent (li). If you then move your mouse onto the dropdown (the ul) you will see the menu fade out and in.

You should be applying the effect to the list element so that it fades in when shown. Not sure how that will pan out exactly so try it and see

csosa · October 28, 2015, 9:22pm

Yeah it didnt appear at all when I put it in the parent li:

<li class="menu_links animated fadeIn">

PaulOB · October 29, 2015, 10:00am

Did you change the js to match?

Works for me straight away.

$(document).ready(function(){
    $('#products-drop').each(function() {
				animationHover(this, 'fadeIn');
    });
});
    
    function animationHover(element, animation){
    element = $(element);
    element.hover(
        function() {
            element.find('ul').addClass('animated ' + animation);        
        },
        function(){
            //wait for animation to finish before removing classes
            window.setTimeout( function(){
                element.find('ul').removeClass('animated ' + animation);
            }, 2000);         
        });
}

Add the products-drop id here instead of in the ul:

  <li id="products-drop" class="menu_links"><a href="products.html">Products <span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span></a>
                        <ul>

csosa · October 29, 2015, 6:08pm

I see it needed that too? I didnt have that in the
original code.

The animation to the parent li also correct?

  <li id="products-drop" class="menu_links animated fadeIn"><a href="products.html">Products <span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span></a>

PaulOB · October 29, 2015, 8:44pm

The class ‘animated’ and ‘fadein’ are added by the js automatically.

csosa · October 29, 2015, 11:40pm

hmm I dont see the animation working when I
hover at first but when I leave my cursor there
it does it…

PaulOB · October 30, 2015, 5:25pm

You don’t seem to have added the revised js that I gave you?

csosa · October 30, 2015, 5:29pm

Yeah it should be in there. animate.js

HTML:

<ul id="menu">
                    <li class="menu_links active"><a href="/index.html">Home</a></li>
                    <li class="menu_links"><a href="/aboutus.html">About Us</a></li>
                    <li id="products-drop" class="menu_links"><a href="products.html">Products <span class="glyphicon glyphicon-menu-down" aria-hidden="true"></span></a>
                        <ul>  
                           <li><a href="/shocklabels.html"><span class="icon-shocklabelsicon-01"></span>Shock Indicator Labels</a></li>
                            <li><a href="/tiltindicator.html"><span class="icon-tiltindicator-01"></span>Tilt Indicator Label</a></li>
                            <li><a href="/protectapak.html"><span class="icon-protectapakicon-01"></span>Protect-A-Pak</a></li>
                            <li><a href="/omnig.html"><span class="icon-omnigicon-01"></span>OMNI-G</a></li>
                            <li><a href="/omnigws.html"><span class="icon-omnigicon-01"></span>OMNI-GWS</a></li>
                            <li><a href="/shockfuse.html"><span class="icon-shockfuseicon-01"></span>Shock Fuse</a></li>
                            <li><a href="/transmonitor.html"><span class="icon-transmonitoricon"></span>Transmonitor</a></li>
                            <li><a href="/transmonitortd.html"><span class="icon-transtdicon-01"></span>Transmonitor TD</a></li>
                            <li><a href="/impactographanalog.html"><span class="icon-iogicon-01"></span>Impact-O-Graph</a></li>
                            <li><a href="/digishock.html"><span class="icon-digishockicon-01"></span>Digi-Shock</a></li>
                        </ul>
                    </li>
                    <li class="menu_links"><a href="/contactus.html">Contact Us</a></li>
                    <li class="menu_links"><a href=/sitemap.html>Sitemap</a></li>
                    <li class="menu_links"><a href="/support.html">Support</a></li>
                    <li class="menu_links"><a href="/newsevents.html">News & Events</a></li>
                </ul>

PaulOB · October 30, 2015, 5:33pm

You removed the space between the classes:

element.find('ul').addClass('animated' + animation);

Which then applies a class to the ul like this.

<ul class="animatedfadeIn">

It should of course be:

<ul class="animated fadeIn">

Add the space back into the js as before.

element.find('ul').addClass('animated ' + animation);

csosa · October 30, 2015, 5:58pm

It worked now but just curious to know why
it needs that little space is it because it
is calling two classes?

RyanReese · October 30, 2015, 6:11pm

If you don’t have a space, it will render like this

animatedfadeIn

If you HAVE the space, then it will be

animated fadeIn

Obviously with animatedfadeIn, that’s just one class. Putting that space there lets all other scripts (css, js) know that there are two classes there, and different animations / stuff will apply in that case. That space is crucial.

csosa · October 30, 2015, 8:19pm

I see.

system · January 30, 2016, 3:19am

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.