让div滑动一点从右边

Question

我想让div里面的文字从页面加载时的右侧滑入它的位置（进入它的位置，我在css中指定的位置），但不是从结尾该页面，但只能从20或30像素。

我尝试了几个选项，但似乎无法与此打成一片。我怎样才能做到这一点？

Answer 1

您可以通过最初为您的div添加保证金来做到这一点。然后，你可以添加一个类，在页面加载改变了这一利润率回落到零：

CSS

#div{ 
margin-left:30px; 
} 

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

然后在页面加载“后负荷”类添加到这个div。

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