Question

With jquery i can’t get links working AND animate the anchors’ background both.
It seems that either one or the other works.

This is the markup:

   <ul class="nav">
   <li> <span id="background"> </span><span id="active"></span><a href="page1.html"     
   class="active">page 1</a> </li>
   <li> <a href="page2.html">page 2</a> </li>
   </ul>

This is the jquery code with which the clicking action happens but not the animation effect:

$("ul.nav a").click(function () {
     $("span#background").fadeIn(800, function () {});
     $("#active").animate({left: "+=2410"}, 950)     
   }); 

The “span” elements have background images via css which is dynamically placed within the active listelement. Thus the active link gets a background and an animated image flying in.
When inserting “return false;” at the end of the jquery code, the animation does run but clicking action is killed.

this is the bare bones testpage:
link to testpage

Thanks anyone who can help!

Answer 1

I looked at your above snippet as well as your testpage and the problem is you want to have a single click that allows the anchor to follow the href AND show animations at the same time.

There is a better solution. That’s to have the animations occur during mouse over via jQuery .hover() method. Reference HERE

The testpage example using .hover() is here: jsFiddle

I took the liberty in changing the animations a bit, but you should get the idea along with the many comments I put in to understand the flow/concept.

If the .hover() method is not acceptable, then it’s still possible to use a single onclick for everything but then no animations will happen during mouse-over. This jsFiddle uses .click() instead.

Because .hover() is then used for animations, the anchor tag still can be allowed to function normally when it’s clicked on.