again div1 left Increase and won't go to its default value. when I try it on FF it doesn't give 25% of left and right, But when I try it on IE it works perfectly fine. Does anybody have an idea with this?
<p>Click to slide</p> <div id="container"style="height: 50%; width: 50%; background: #001122; position: relative; margin: 0;"> <div id='div0' style="removed:absolute ;background: #fff333; height:70%; width:50%; margin-removed25%;"> <span>Test</span> </div> <div id = 'div1' style="background: #003344; height: 70%; width: 25%;padding:0px; removed0%;" > <h1>This will slide to the left</h1> </div> <div id = 'div2' style="background: #003344; height: 70%; width: 25%;padding:0px; removed0%; removed:absolute;" > <h1>This will slide to the Right</h1> </div> </div>
window.onload = function() { $(document).ready(function() { $("p").click(function() { if($('#container').is(':visible')) { $('#div1').animate({'left':'+=25%'},1000); $('#div2').animate({'right':'+=25%'},1000,function() { $('#container').fadeOut(1000); }); }else { $('#container').fadeIn(1000,function() { $('#div1').animate({'left':'-=25%'},1000); $('#div2').animate({'right':'-=25%'},1000); }); } }) }); }
$('#div1').animate({'left':'+25%'},1000);
var
This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)