50% / 50% div, on click 100% animation

Question

What am I doing:

I am working on a site with two different “sides”, when you click on the left side, the left side should be 100%. If you click on the right side, the right side should be 100%.

Done already:

I made the left and right side. And animated it using jQuery.

Problem
When you click the left div, the animation works (it only worked when I added the absolute position), but when I try to create the same animation for the right side; he does not work! I created jsFiddle so you can see the current code: http://jsfiddle.net/sh3Rg/

I can not do the right job. When you click on the right div; he needs to revive up to 100%. Like the left.

code

You can preview the preview and code here: http://jsfiddle.net/sh3Rg/

HTML:

<div id="left"></div> <div id="right"></div> 

JS:

 <script> $('#left').click(function(){ $('#left').animate({width:'100%'}, 2500); }); </script> <script> $('#right').click(function(){ $('#right').animate({width:'100%'}, 2500); }); </script> 

CSS

 html,body { padding:0; margin:0; height:100%; min-height:100%; background-color: #000000; } p { cursor: pointer; color: #FFF; } #left { width: 50%; height: 100%; background: #666; float: left; cursor: pointer; position: absolute; } #right { width: 50%; height: 100%; background: #063; float: right; cursor: pointer; } 

Hope someone can help me. Regards, Milan

PS: If I posted / did something wrong in this thread; Sorry, this is my first question.

Answer 1

I did a little work. Please, check him.

http://jsfiddle.net/sh3Rg/4/

 $('#left').animate({width:'0%'}, 2500); $('#right').animate({width:'100%'}, 2500); 

I hope you understand the code. Please feel free to in case of any doubt.

Answer 2

The problem is that #right grows to 100%, but grows under #left

You must place #right above the left container using positioning other than static .

So the magic:

• Use absolute or fixed positioning
• When clicked, change the z-index active element to be larger than the z-index another

 #left, #right { width: 50%; height: 100%; cursor: pointer; position: absolute; } #left { left:0; background: #666; } #right { background: #063; right: 0; } 

And the script:

 var Z = 0; $('#left').click(function(){ $('#left').css('z-index',Z++).animate({width:'100%'}, 2500); }); $('#right').click(function(){ $('#right').css('z-index',Z++).animate({width:'100%'}, 2500); }); 

See a working example: http://jsfiddle.net/sh3Rg/19/

Answer 3

Live demo

HTML: (add a specific class :)

 <div id="left" class="toggWidth"></div> <div id="right" class="toggWidth"></div> 

JQ:

 $('.toggWidth').click(function(){ $(this).stop().animate({width:'100%'}, 2500) .siblings('.toggWidth').stop().animate({width:'0%'}, 2500); }); 

Answer 4

The accepted answer is correct. But why are you doing width:100% ? When I clicked on the div, it got 100%, and then I can’t go back to the previous state. I tried this with width:95%

You can look here: http://jsfiddle.net/sh3Rg/24/

Answer 5

Your problem is that the left div is set to 50% before the right, so that it has predominance.

this is exactly the same as setting to 50% left and 100% right, it will be exactly the same as if you set both to 50%

Answer 6

Instead of messing around with width and height , you can do it all with positioning.

The invalid bit in your example was z-index , as one div disappeared below the other.

Here is a working working example .

HTML:

 <div id="left"></div> <div id="right"></div> 

CSS

 div { cursor: pointer; position: absolute; top: 0; bottom: 0; z-index: 0; } #left { background: #666; left: 0; right: 50%; } #right { background: #063; right: 0; left: 50%; } 

JQuery

 $('div').click(function () { $(this).css('z-index', 1); if (this.id === 'right') { $(this).animate({left: 0}, 2500); } else { $(this).animate({right: 0}, 2500); } });