Jquery box animation for shrinking and expanding more than one box at a time

Question

I've got an idea I want to pull off, and I've half done it but now I'm a little stuck and need some help.

I have 3 images.. each around 200px wide... when you hover over an image the image in question becomes bigger and makes the other two smaller.

I've managed this .. here is my demo

My code is as follows: (You might see it a bit sloppy but I'm new to jquery.

<style type="text/css">

body,
html {
    margin: 0px;
    padding: 0px;
}
#outerbox1,
#outerbox2,
#outerbox3 {
    background-color:#000;
    width: 200px;
    padding: 10px 5px;
    float: left;
}
#box1,
#box2,
#box3 {
    width: 100%;
    height: 180px;
    background-position:center;
    background-repeat:no-repeat;
}
#box1 {
    background-image:url(mqdefault1.jpg);
}
#box2 {
    background-image:url(mqdefault2.jpg);
}
#box3 {
    background-image:url(mqdefault3.jpg);
}
</style>


<div id="outerbox1">
<div id="box1">

</div>
</div>

<div id="outerbox2">
<div id="box2">

</div>
</div>

<div id="outerbox3">
<div id="box3">

</div>
</div>
<script>
$("#outerbox1").hover(function(){
    $(this).animate({ width: "320px" });
    $("#outerbox2").animate({ width: "140px" });
    $("#outerbox3").animate({ width: "140px" });
}, function() {
    $(this).animate({ width: "200px" });
    $("#outerbox2").animate({ width: "200px" });
    $("#outerbox3").animate({ width: "200px" });
});

$("#outerbox2").hover(function(){
    $(this).animate({ width: "320px" });
    $("#outerbox1").animate({ width: "140px" });
    $("#outerbox3").animate({ width: "140px" });
}, function() {
    $(this).animate({ width: "200px" });
    $("#outerbox1").animate({ width: "200px" });
    $("#outerbox3").animate({ width: "200px" });
});

$("#outerbox3").hover(function(){
    $(this).animate({ width: "320px" });
    $("#outerbox1").animate({ width: "140px" });
    $("#outerbox2").animate({ width: "140px" });
}, function() {
    $(this).animate({ width: "200px" });
    $("#outerbox1").animate({ width: "200px" });
    $("#outerbox2").animate({ width: "200px" });
});
</script>

So my problem is if I hover over box 1... then box 2. I have to wait for box 1 to shrink before box 2 starts to expand.

How would I go about making it so box 2 starts to expand while box 1 is shrinking?

Answer 1

The problem is being caused by the mouseleave/handlerOut firing on each of those boxes. If you wrap your boxes in one container and only handle the mouseleave on that, you should get the behavior you want.

Fiddle: http://jsfiddle.net/chucknelson/FQ5ae/

HTML

<div id="container">
    <div id="outerbox1">
        <div id="box1">  

        </div>
    </div>
    ...and so on
</div>

Javascript

$("#container").hover(function() {
    //nothing for handlerIn
}, function() {
    $("#outerbox1").animate({ width: "200px" });
    $("#outerbox2").animate({ width: "200px" });
    $("#outerbox3").animate({ width: "200px" });
});

$("#outerbox1").hover(function(){
    $(this).animate({ width: "320px" });
    $("#outerbox2").animate({ width: "140px" });
    $("#outerbox3").animate({ width: "140px" });
}, function() {  
    //nothing for handlerOut
});
...and so on

Answer 2

You can do this...

$("#outerbox1").stop().hover(function(){...
$("#outerbox2").stop().hover(function(){...
$("#outerbox2").stop().hover(function(){...

Also this link might help.

Cheers!!!