Sanjeev K Sanjeev K - 3 months ago 17
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?



#wrapper{
position: fixed;
z-index: 101;
top:0;
color:#fff;
font-weight:bold;
font-size: 10px;
height:50px;
width:100%;
min-width:50px;
background:red;
}


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

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

Answer

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 https://jsfiddle.net/d1m9hrx5/