JQuery animation not working on anchor tag

Question

JQuery animation not working on anchor tag

1.2k Views Asked by huzzah At 18 April 2025 at 23:17

I am using the easing plugin to 'shake' my anchor tag when a user hovers with the mouse. It works if I attach it to any element other than the <a> tag. I also tried attaching the behavior to the preceding <li> but it didn't work there either. I'm a right noob with JQuery; I figured it must be something specifically to do with anchor tags, but I couldn't find anything with a quick Google search. Perhaps I'm overlooking something? Here is my code below:

          <section id="content">
              <nav>
                    <ul>
                        <li id="selected">Home</li>
                        <li style="margin-left:35px;"><a href="about_alabama_bunker.html" title="Learn about Alabama Bunker" class="shake">About</a></li>
                        <li style="margin-left:5px;"><a href="services_offered.html" title="Services offered by Alabama Bunker" class="shake">Services</a></li>
                        <li style="margin-left:5px;"><a href="security_bunker_products.html" title="Product catalog" class="shake">Products</a></li>
                        <li style="margin-left:25px;"><a href="contact_alabama_bunker.html" title="Get in touch with our sales staff for inquiries, comments or suggestions" class="shake">Contact</a></li>
                    </ul>
              </nav>

          </section>

and my JQuery:

<script type="text/javascript">
$(document).ready(function() {
$('a.shake').hover(function(event) {
    $(this)
        .css(
            {'color': 'ff0000' }, {
                duration: 'slow',
                easing: 'easeOutBounce'
            })
        .animate(
            { left: 25 }, {
                duration: 'fast',
                easing: 'easeOutBounce'
            })
        .animate(
            { left: 0 }, {
                duration: 'fast',
                easing: 'easeOutBounce'
            });
    });
});
</script>

UPDATE

I removed the first animation for the color change. I have tried moving the class into the <nav> and the <ul> element respectively. I have also made sure the call to the selector is to $(.shake) instead of $(a.shake). No workee in any circumstance.

Original Q&A

There are 1 best solutions below

**Simon Dorociak** · Accepted Answer

In your css, have you attribute position: relative or position: absolute ?

nav ul li a.shake {
    text-decoration: none;
    display: block;
    position: relative;
    }


<script type="text/javascript">
    $(document).ready(function() {
    $('a.shake').hover(function(event) {
        $(this)
            .animate(
                { left: 200 }, {
                    duration: 'slow',
                    easing: 'easeOutBounce'
                })
            .animate(
                { left: 0 }, {
                    duration: 'slow',
                    easing: 'easeOutBounce'
                });
    });
});
  </script>

Without adding position attribute it won't work also with event.preventDefault().

Also i hope that you have in your <head> tag

<script src="yourPath/jquery.easing.1.3.js" type="text/javascript"></script>

It's necessary for work.

So edit your code like this:

<section id="content">
              <nav>
                    <ul>
                        <li><a style="position: relative; margin-left:35px;" href="about_alabama_bunker.html" title="Learn about Alabama Bunker" class="shake">About</a></li>
                        <li><a style="position: relative; margin-left:5px;" href="services_offered.html" title="Services offered by Alabama Bunker" class="shake">Services</a></li>
                        <li><a style="position: relative; margin-left:5px;" href="security_bunker_products.html" title="Product catalog" class="shake">Products</a></li>
                        <li><a style="position: relative; margin-left:25px;" href="contact_alabama_bunker.html" title="Get in touch with our sales staff for inquiries, comments or suggestions" class="shake">Contact</a></li>
                    </ul>
              </nav>
          </section>

I tested it and it works!

JQuery animation not working on anchor tag

There are 1 best solutions below

Related Questions in JQUERY

Related Questions in JQUERY-PLUGINS

Related Questions in ANCHOR

Related Questions in JQUERY-EASING

Trending Questions

Popular # Hahtags

Popular Questions