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.
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!