1

我对 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>

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

4

2 回答 2

2

您可以使用 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>

于 2013-08-12T10:48:00.533 回答
1 
<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>

对于上面的 html，你可以参考 **演示

于 2013-08-12T11:00:46.263 回答