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>