CODEWITHSUNDEEP
jqueryhtmlcss
Sanjeev Kumar
Sanjeev Kumar

Reputation: 3163

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?

$(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>

Upvotes: 1

Views: 5326

Answers (3)

Ganesh Putta
Ganesh Putta

Reputation: 2681

$(document).ready(function(){
  $("#main").animate({ right: '0'}, 'slow');
});
#main{

 z-index: 999;
 top:0;
 color:#000;
 font-weight:bold;
 font-size: 10px;
 height:50px;
 width:100%;
 min-width:50px;
 background:yellow;
 position: fixed;
 right:100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">
   Content goes here..
</div>

Upvotes: 1

Hitesh Misro
Hitesh Misro

Reputation: 3461

Try this

$(document).ready(function(){
  $("#wrapper").animate({ right: '0'}, '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;
 right:100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
   Content goes here..
</div>

or

$(document).ready(function(){
  $("#wrapper").animate({ left: '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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
   Content goes here..
</div>

Upvotes: 1

Zay Lau
Zay Lau

Reputation: 1864

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/

Upvotes: 1

Related Questions