Q:

Only animate when tab is not slided out

I have this tab slider which moves a little when you hover the tab.  I would like this to happen only when the slider is not slided out.  When it's out it shouldn't move on hover. 
See working example here. 
The slider gets the class "open" when it's sliding out, so I have tried adding this code:
if (! $("#contactContainer").hasClass("open")) {
    $("#contactContainer").hover(function() {
        $(this).stop(true, true).animate({
        "right": "+=30px"
    }, 300); }, function() {
        $(this).stop(true, true).animate({
        "right": "-=30px"
    }, 300); });
}

However, it doesn't seem to make any difference.  The open slider still moves when hovering it.  How do I fix this? 

A:

What you're doing is only adding the hover functionality when the container isn't open -- since this happens on load (when the container isn't open) the hover functionality is always there.  
There are a few ways round this, the simplest is to check inside the hover function if the container is open, try this: 
$("#contactContainer").hover(
    function() {
        if (! $(this).hasClass("open")) {
            $(this).stop(true, true).animate({"right": "+=45px"}, 300);
        }
    }, function() {
        if (! $(this).hasClass("open")) {
            $(this).stop(true, true).animate({"right": "-=45px"}, 300);
        }
    }
);

Alternatively implement a closed class and use CSS animations on that class directly to do the move.  Or add/remove the hover functionality as part of the open/close functionality.  The above solution is easiest but may have some issues depending on the exact functionality you want. 