从左到右显示带动画的div

Question

我有一个页面，我想从左到右显示幻灯片效果，但这是相反的，从右到左，不确定这里有什么不对，有人可以看看吗？

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

Answer 1

你试图告诉jQuery动画从right: 0;到right: 100%;的元素，它将元素距离0从右移动到100％，因此它是一个从右到左的动画。

您可能需要将元素初始状态设置为right: 100%，将jQuery设置为right: 0以获得效果

我在这里实现了一个CSS版本，其中包含了#wrapper { right: 100%; transition: 1s; }

并通过将类应用于#wrapper.animate { right: 0; }

来设置位置

您所要做的就是切换元素类$("#wrapper").addClass("animate");

在https://jsfiddle.net/d1m9hrx5/

上试试

Answer 2

试试这个

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

或

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

Answer 3

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