在加载时滑动页面的一些内容

Question

我对 jQuery 完全陌生，基本上是刚开始，所以如果这个问题听起来很业余或愚蠢，请原谅。任何我希望页面的页眉和页脚保持静态但页面的中心内容在页面加载时从右侧滑入的任何方式。这是执行此操作的页面： flooring-by-design.com

我已经研究过 jQuery 的向下滑动功能和动画功能，但是从顶部向下滑动，我不希望这样。我该怎么办？

我的内容是这样的：

<div class="container">
    <h1 class='logo'>Site Name</h1>
    <div class='bcontent'>
        <div id="one">One Content</div>
        <div id="two">Two</div>
        <div id="three">Three</div>
    </div>
    <footer>Copy rights</footer>
</div>

第 1 2 和第 3 部分是我想在页面加载时很好地滑入的部分。就像示例链接一样。

Answer 1

您可以使用 jQuery 来做到这一点。

基本上，最初使用 CSS 将内容设置为距左侧 800 像素的偏移量。然后使用 jQuery animate，我们将内容滑入，直到与左侧的偏移量为 0px。您可以增加或减少持续时间来改变滑入的速度。

jQuery

$(document).ready(function() {

    $("#one").animate({left: "0"}, {
    duration: 2000       
    });
    $("#two").animate({left: "0"}, {
    duration: 2250
    });
    $("#three").animate({left: "0"}, {
    duration: 2500        
    });
});

CSS

.bcontent > div{
    position: relative;
    display: inline-block; /* to display the 3 div's in same line */
    height: 200px; /* height, width and border just added for demo, not mandatory */
    width: 100px;
    border: 1px solid black;
    left: 110%; /* Added to avoid the width issue pointed out by DRP96 */
}
.bcontent{
    width: 100%;
    overflow: hidden; /* added to make the content hidden initially and avoid scroll-bar */
}

$(document).ready(function() {
  $("#one").animate({
    left: "0"
  }, {
    duration: 2000
  });
  $("#two").animate({
    left: "0"
  }, {
    duration: 2250
  });
  $("#three").animate({
    left: "0"
  }, {
    duration: 2500
  });
});

footer {
  bottom: 0px;
  font-size: 20px;
}
.bcontent {
  width: 100%;
  overflow: hidden;
}
.bcontent > div {
  position: relative;
  display: inline-block;
  height: 200px;
  width: 100px;
  left: 110%;
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<div class="row">

  <h1 class='logo'>Site Name</h1>

  <div class='bcontent'>
    <div id="one" class="span4">One Content</div>
    <div id="two" class="span4">Two</div>
    <div id="three" class="span4">Three</div>
  </div>
  <footer>Copy rights</footer>
</div>