Using jQuery to change div width from 50% to 70% when hovering

Question

I have two divs that are 50% wide. I want to make the hanging div expand to 70% and the other to decrease to 30%. And when the mouse leaves, they both return 50%. I wrote a script, but it does not give the correct results. Widths are fluid, so they need to adapt to all window sizes. how can i do this job right?

I have not written a mouseout function yet, as the manipulator does not work correctly.

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

Here is my code:

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

Here is my css for div

 .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 use 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> 

Answer 1

I don't know if this applies to 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 shell to make sure that 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 am using #wrapper

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

and

 width:100%; 

In #left, #right we use:

 display:inline-block; 

witch is first compatible with s> 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 events to both #right and #left

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

...

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

We take the element in which the event is fired and find all its parents ( #wrapper ) childNodes: $(this).parent().children() Now we filter out everything that matches this using the jQuery not method. ( this = #left OR #right ) which is an element. Now we have #right -> #left and #left -> #right .

mouseOutHandler resets all #wrapper childNodes to 50%

Hope this leads you to the right path ...

EDIT:

If the duration of your animation ends with a chain / queue, you can use the stop method, which stops all active animations and clears the queue:

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

Answer 2

This should work well for you:

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

EDIT : added animation
EDIT : resize added 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 instead of the height of the container:

 <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 that it works.

Answer 3

To accept @James (+1) answer and add animation just use .animate() :

 $(function(){ $("#div1").hover( function(){ $(this).animate({width: '70%'}); }, function(){ $(this).animate({width: '50%'}); } ); }); 

Demo: http://jsfiddle.net/mattball/sAW2c/