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.
}

然后在页面加载时添加＆＃39;后加载＆＃39;这个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/

使div从右侧滑动一点

3 个答案: