jQuery lava-lamp-like effect bouncing all over the place!

Question

I followed the tutorial found here and added my own flare to it: tutorial

What I was looking to accomplish was to put a specific image on the left and right side of the list item. So instead of just the generic <li id="blob"></li> created in the tutorial, I did <li id="blob"><div class="blob-wrap"><div class="leftimage"></div><div class="rightimage"></div></li> to accomplish the particular effect I wanted. It works beautifully ... except that the image attempts to bounce back the "currentPageItem" if I leave the mouse hovering over one of the list items.

Here's a JS Bin example: http://jsbin.com/odome

What do I need to do to fix it? jQuery is firing the "hoverOut" function (or whatever you want to call it). But why?

Answer 1

The z-index was, indeed, the problem. I didn't realize that z-indexes didn't apply to floated elements though. I had to apply position: relative to the a links and give it a z-index higher than the blob.