restore to defaults with jQuery hover

Question

I have below code:

JQUERY

$(document).ready(function() {
    $("#developer").hover(function() {
        $("#coder").fadeTo(1000,0.4);
        $("#my_pic").animate({right:'110px'}, 1500);
    });
});

It works but I want to restore defaults when user moves the mouse out of the area of #developer.

CSS

#coder {
    opacity: 1;
}

#my_pic {
    position: relative;
}

HTML

<div id="developer" class="threecol">
    <h1><span>&lt;</span>developer<span>&gt;</span></h1>
</div>

<div class="sixcol">
    <img id="my_pic" src="images/me.png" />
</div>

<div id="coder" class="threecol last">
    <h1><span>&lt;</span>coder<span>&gt;</span></h1>
</div>

Answer 1

Just use a 2nd function for hover

, function(){
    $("#coder").fadeTo(1000,1);
    $("#my_pic").animate({right:'0px'}, 500);            
}

FIDDLE

Answer 2

Just append the other function taking care of the resetting after the first function inside hover:

$(document).ready(function() {
    $("#developer").hover(
        function() {
            $("#coder").fadeTo(1000,0.4);
            $("#my_pic").animate({right:'110px'}, 1500);
        }, function() {
            $("#coder").fadeTo(1000,1);
            $("#my_pic").animate({right:'0'}, 1500);
        });
});

Answer 3

$(document).ready(function() {
$("#developer").mouseout(function() {
    $("#coder").fadeTo(1000,1);
    $("#my_pic").animate({right:'110px'}, 1500);
});
});

Answer 4

Try this

$(document).ready(function() {   
    $("#developer").hover(function() {
        $("#coder").fadeTo(1000,0.4);
        $("#my_pic").animate({right:'110px'}, 1500);
    }, 
    function() {
        $("#coder").fadeTo(1000,1);
        $("#my_pic").animate({right:'0'}, 1500)
    });
});

DEMO