Sanjeev K Sanjeev K - 1 year ago 63
CSS Question

Show div with animation left to right

I have a page where I want to show the div with slide in effect from left to right, but this is working opposite, right to left, not sure whats wrong here, can somebody please look?

position: fixed;
z-index: 101;
font-size: 10px;

<div id="wrapper">
Content goes here..

$("#wrapper").animate({ right: '100%'}, 'slow');

Answer Source

You are trying to tell the jQuery to animate the element from right: 0; to right: 100%; which is moving the element distance 0 from right to 100% from right, so it is a right to left animation.

You probably would have to set the element initial state to right: 100% and jQuery animate to right: 0 to get the effect

I have implemented a CSS version here that initalized #wrapper { right: 100%; transition: 1s; }

and set the position by applying class to it #wrapper.animate { right: 0; }

all you have to do is toggling the class of your element $("#wrapper").addClass("animate");

try it on