Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: ASP.NET CSS jQuery VB.NET
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/[^]
Posted 21-Apr-13 23:03pm
Edited 22-Apr-13 20:21pm
v6
Comments
Brian A Stephens at 22-Apr-13 8:50am
   
It's unclear what you are trying to do with this, especially because your code isn't valid. What are the "removed" CSS styles supposed to be? I changed most of them to "position" and got an effect where each time you click, div1 slides further to the left and div2 slides further to the right. What else do you want? What's the point of checking whether the container is visible, since it will always be?
iMaker.ph at 22-Apr-13 19:59pm
   
Sorry for the messy Code, the removed should be position,
Should be like http://jsfiddle.net/r7MgY/18127/ this sorry again but I don't know why the background won't take effect with Fiddle

1 solution

Rate this: bad
good
Please Sign up or sign in to vote.

Solution 1

I don't why but its working fine now when Changing code to
 
$('#div1').animate({'left':'+25%'},1000);
 
I think the = sign is the cause of my problem.
  Permalink  
Comments
Brian A Stephens at 23-Apr-13 8:05am
   
The proper syntax for a relative change is += or -= not just the "+25%" you have above. The "+25%" would probably be interpreted by most browsers the same as "25%" - just an indication that it's a positive number.
iMaker.ph at 23-Apr-13 8:34am
   
Hmm that's weird Why is it when I'm on debugging mode after $('#container').fadeIn(1000,function() the value of left doesn't return to Zero?

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
0 OriginalGriff 240
1 Kamal Rocks 184
2 PIEBALDconsult 150
3 BillWoodruff 148
4 Jochen Arndt 135
0 OriginalGriff 5,695
1 DamithSL 4,506
2 Maciej Los 4,007
3 Kornfeld Eliyahu Peter 3,480
4 Sergey Alexandrovich Kryukov 3,190


Advertise | Privacy | Mobile
Web03 | 2.8.141216.1 | Last Updated 23 Apr 2013
Copyright © CodeProject, 1999-2014
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100