Zeige div mit Animation von links nach rechts

Question

Ich habe eine Seite, wo ich das div mit Folie in Wirkung von links nach rechts zeigen möchte, aber das arbeitet entgegengesetzt, von rechts nach links, nicht sicher, was hier falsch ist, kann jemand bitte schauen ?

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

Sie versuchen die jQuery zu sagen, das Element right: 0;-right: 100%; zu animieren, die das Element Abstand 0 von rechts auf 100% von rechts bewegt, so ist es eine rechts nach links Animation.

Sie würden wahrscheinlich das Element Anfangszustand right: 100% und jQuery animieren zu right: 0 gesetzt haben, um den Effekt zu erhalten

ich hier eine CSS-Version implementiert haben, die durch die Anwendung Klasse #wrapper { right: 100%; transition: 1s; }

und stellen Sie die Position initialisiert es #wrapper.animate { right: 0; }

$("#wrapper").addClass("animate"); alles, was Sie tun müssen, ist die Klasse Ihres Elements Makeln

versuchen Sie es auf https://jsfiddle.net/d1m9hrx5/

Answer 2

Versuchen Sie, diese

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

oder

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