divスライドを少し右に作ってください

Question

divをテキスト内に入れて、ページが読み込まれたときに右から（それが私のCSSで指定した場所に）スライドします。このページは、20ピクセルまたは30ピクセルからのみ表示されます。

私はいくつかのオプションを試しましたが、これで釘を打つことはできません。どうすればこれを達成できますか？

Answer 1

最初にdivに余白を追加することでこれを行うことができます。このdiv要素に「後負荷」クラスを追加し、ページの読み込みに続いて

CSS

#div{ 
margin-left:30px; 
} 

.after-load{ 
margin-left:0px; 
transition-duration:.5s // you can change this as you need. 
} 

：次に、ページのロードに戻ってゼロまで、このマージンを変更するクラスを追加することができます。

$(document).ready(function(){ 
$('#div').addClass('after-load'); 
}); 

Answer 2

..あなたが効果を滑らかにするための移行を使用することができますいくつかのデフォルトのスタイルを追加し、ページのロードにjQueryを使ってクラスを追加。.. と、この追加されたクラスで、いくつかのスタイルを追加してください...

jQuery(window).load(function() { 
    $('.my-div').addClass('active-class'); 
}); 
.my-div { 
    transition: right 0.25s ease; 
    position: relative; 
    right: 0; 
} 
.my-div.active-class { 
    right: 30px; 
} 

Answer 3

JQuery Animateを試しましたか？

HTML：

<img id="book" src="http://www.sevenforums.com/attachments/browsers-mail/145092d1379294855t-multiple-web-pages-1-screen-page-untitled.png" alt="" width="100" height="123" 
    style="position: relative; right: 0px;"> 
    <br><br><br> 
<button type="button" id="clickme"> 
    Click here 
</button> 

JS：

$(document).ready(function() { 
    $("#clickme").click(function() { 
    alert("Image will animate 50px to the right side"); 
    $("#book").animate({ 
     left: "+=50", 
     right: "0" 
    }, 5000, function() { 
     // Animation complete. 
    }); 
    }); 
}); 

デモ：http://jsfiddle.net/d7m4q4n1/2/