Click here to Skip to main content
13,002,163 members (75,825 online)
Rate this:
Please Sign up or sign in to vote.
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%;">
<div id = 'div1' style="background: #003344; height: 70%; width: 25%;padding:0px; removed0%;" >
<h1>This will slide to the left</h1>
<div id = 'div2' style="background: #003344; height: 70%; width: 25%;padding:0px; removed0%; removed:absolute;" >
    <h1>This will slide to the Right</h1>

window.onload = function()
Posted 21-Apr-13 22:03pm
Updated 22-Apr-13 19:21pm
Brian A Stephens 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? 22-Apr-13 19:59pm
Sorry for the messy Code, the removed should be position,
Should be like this sorry again but I don't know why the background won't take effect with Fiddle

1 solution

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

Solution 1

I don't why but its working fine now when Changing code to


I think the = sign is the cause of my problem.
Brian A Stephens 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. 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
Top Experts
Last 24hrsThis month

Advertise | Privacy | Mobile
Web02 | 2.8.170624.1 | Last Updated 23 Apr 2013
Copyright © CodeProject, 1999-2017
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