Hi I'm creating a slide animation Like the one that on the entrance of a mall
I Got the sliding part but what I notice is, when I click
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);
});
}
})
});
}
http://jsfiddle.net/r7MgY/18127/[
^]