從左到右顯示帶動畫的div

Question

我有一個頁面，我想從左到右顯示幻燈片效果的div，但是這是相反的，從右到左，不知道這裏有什麼不對，有人請看？

$(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%;這是由右至100％，從向右移動元件間隔0，所以它是一左一右動畫。

你可能會需要的元素的初始狀態設置爲right: 100%和jQuery動畫以right: 0得到

我在這裏實現了一個CSS版本，大意是initalized #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>