Question

I’m wondering if it is at all possible to create a Jquery animation with an image that is linkable. I’ve looked around but so far I’ve had no such luck finding something I could fiddle with the coding to get the desired effect I’m looking for, or a plugin.

Basically what I want to do is have “tabs” on the left side of a layout I am currently designing that will “pull out” when you hover your mouse over them and link to the a page. Currently, I have designed these tabs graphically as part of the layout design, though if coding blocks to rest right where the border of the layout is would be more doable, I am willing to do that.

To be more specific on the animation I am trying to achieve, I want to animate it so it seems as if you are “pulling” the tab out when you hover your mouse over it, while the other tabs stay stationary. Then, when you move your cursor to say, the tab below it (Or another tab), the pulled out tab will move back to it’s “original size” and the new tab pulls out like the first one. I’d really like to have the animation move the original tab back in while the new tab pulls out, but I am fine with only the tab pull out animation, and the original tab just “snapping” back to it’s original state. I know there is coding and functions just for image swapping, but again I have been unable to find any functions, coding, or plugins to do this kind of animation that is clickable/linkable with an image.

Anything at all, even a “this kind of thing is not doable” would be appreciated. I’m looking to find out if its possible and how I would achieve it, whether it be what plugins could do it, functions, coding, tutorials that are similar, or other forms of website coding/programming that could achieve this. Again, if it’s not doable with images, I’d be fine with ways to do this with block links.

I’m pretty comfortable with HTML and CSS, but Jquery is a fairly new area I’m still learning in.

Answer 1

This is easily doable.

HTML

<ul>
    <li><a href="/about">about</a></li>
    <li><a href="/contact">contact</a></li>
</ul>

CSS

ul {
   width: 300px;
   position: relative;
   overflow: hidden;
}

ul li {
   width: 300px;
   position: absolute;
   left: -280px;
   background: url(/images/li-background.png) no-repeat;
}

This assumes the 20px on the far right of your tabs is the bit that is always shown.

jQuery

$(function() {

    $('ul li').hover(function() {
        $(this).stop().animate({ left: 0 }, 100);
    }, function() {
        $(this).stop().animate({ left: -280 }, 100);
    });

});

Whenever I need to use jQuery’s hover(), I use hoverIntent(). This plugin prevents the hover over and out events from being fired if the user just casually moves the cursor over the element.

Also keep in mind that touch devices don’t have a hover event. You will need to make sure they work correctly.