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?
$(document).ready(function() {
$("#wrapper").animate({
right: '100%'
}, 'slow');
});#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>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/
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments