Using jQuery to change div width from 50% to 70% on hover

Question

I have two divs that have 50% width each. I want to make it so that the the hovered div expands to 70% and the other reduces to 30%. And when the mouse moves out, they both return to 50% each. I wrote a script but it doesn't give the right results. The widths are fluid so they need to adjust to all window sizes. how Can I make this work right?

I didn't write the mouseout function yet as the mouseover doesn't function correctly.

Here's how it works now: http://jsfiddle.net/kYZyp/

Here's my code:

<div id="left" class="content_left"></div>
<div id="right" class="content_right"></div>

Here's my css for the div's

.content_left {
    width:50%;
    top:0px;
    left:0px;
    bottom:0px;
    background:url(wedding.jpg) left center no-repeat;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
    -moz-opacity:0.9;
    -khtml-opacity: 0.9;
    opacity: 0.9;
}

.content_right {
    width:50%;
    top:0px;
    right:0px;
    bottom:0px;
    background:url(events.jpg) right center no-repeat;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
    filter: alpha(opacity=90);
    -moz-opacity:0.9;
    -khtml-opacity: 0.9;
    opacity: 0.9;
}

And i'm using this script:

<script>
$("#left").mouseover(function(){
  $("#left").animate({
    width: "70%",
    opacity: 1
  }, 1500 );
  $("#right").animate({
    width: "30%"
  }, 1500 );
});

$("#right").mouseover(function(){
  $("#right").animate({
    width: "70%",
    opacity: 1
  }, 1500 );
  $("#left").animate({
    width: "30%"
  }, 1500 );
});

</script>

And including this jQuery file:

<script src="http://code.jquery.com/jquery-1.7rc2.js"></script>

Solution 1

Doesn't know if this suites you: http://jsfiddle.net/yCY9y/3/

DOM:

<div id="wrapper">
    <div id="left" class="content_left">LEFT</div><div id="right" class="content_right">RIGHT</div>
</div>

I use the wrapper to be sure we never break the RIGHT to the next line.

CSS:

#wrapper {
    width:100%;
    overflow:hidden;
    white-space:nowrap;
}
#left, #right {
    display:inline-block;
    width: 50%;
}
#left {
    background:red;
}
#right {
    background:yellow;
}

I use on #wrapper

white-space:nowrap; // Newer break whitespaces (break to the next line)

and

width:100%;

On #left, #right we use:

display:inline-block;

witch is first compatible with >IE6. (hopes this is not a problem).

JS:

$("#left, #right").each(function() {
    $(this).data("standardWidth", $(this).width());
});

$("#left, #right").hover(function() {
    $(this).animate({
        width: "70%"
    }, 300 );
    $(this).parent().children().not(this).animate({
        width: "30%"
    }, 300 );
}, function() {
    $(this).parent().children().each(function() {
        $(this).animate({
            width: $(this).data("standardWidth")
        }, 300 );
    });
});

First i Bind the same mouseover and mouseout event on both #right and #left

$(selector).hover(mouseOverHandler, mouseOutHandler);

...

$(this).parent().children().not(this)

We take the element the event is fired throw and finds all it's parents (#wrapper) childNodes: $(this).parent().children() Now we filter out everything matching this using jQuery's not method. (this = #left OR #right) witch is the element. Now we have #right -> #left and #left -> #right.

The mouseOutHandler resets all of #wrapper childNodes's width to 50%

Hopes this leads you the right way...

EDIT:

If you are expiring your animation to chain / queue up use can use the stop method witch stop all active animations and clears the queue:

$(selector).stop().animate({
    ....
})

Solution 2

This should work nicely for you:

<script type="text/javascript">
    $(function(){
        $("#div1").hover(
            function(){
               $(this).css("width", "70%"); 
            },
            function(){
                $(this).css("width", "50%");
            }
        );                             
    });
</script>

EDIT: Added animation
EDIT: Added height resize to animation

<script type="text/javascript">
    $(function(){
        $("#div1").hover(
            function(){
                $(this).animate({ "width" : "70%", "height" : $("#container").height() + "px" }); 
            },
            function(){
                $(this).animate({ "width" : "50%", "height" : "" });
            }
        );                             
    });
</script>
<div id="container" style="height:400px;border:1px solid #000;padding:10px;">
    <div id="div1" style="width:50%;border:1px solid #000;min-height:100px;">
        Hello world!
    </div>
</div>

EDIT: If you want it to fill the height of the window, just use window.innerHeight in place of the container height:

<script type="text/javascript">
    $(function(){
        $("#div1").hover(
            function(){
                $(this).animate({ "width" : "70%", "height" : window.innerHeight + "px" }); 
            },
            function(){
                $(this).animate({ "width" : "50%", "height" : "" });
            }
        );                             
    });
</script>
<div id="div1" style="width:50%;border:1px solid #000;min-height:100px;">
    Hello world!
</div>

Here's a jsFiddle that demonstrates it working.