5

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>

3 Answers 3

7

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({
    ....
})
2
  • That works like I want my script to. but the problem arises because I have no defined widths. I want it to be a fluid layout. How can I get the widths and use them to animate accordingly? Commented Nov 3, 2011 at 23:55
  • Okay I got your code to work for me. But I just need to know how I can make the div's height to be 100% at all times? I want it to be fluid, so the height fills up the window Commented Nov 4, 2011 at 0:24
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.

8
  • Than you for the response, but I want it to have a smooth animation and I want to use JQuery for it. Commented Nov 3, 2011 at 23:43
  • Shamelessly copied your code and added animation: stackoverflow.com/questions/8003137/…
    – Matt Ball
    Commented Nov 3, 2011 at 23:48
  • That is the effect that I want, but it doesn't work in my scenario. I think it's because I do not have any defined widths, because I want the layout to be fluid. Maybe use JS to get the current width of the div and animate accordingly? Commented Nov 3, 2011 at 23:53
  • I thought you were using a percentage width though? Commented Nov 3, 2011 at 23:55
  • And I also want it to have 100% height. So it fills up the window Commented Nov 3, 2011 at 23:57
0

To take @James' answer (+1) 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/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.