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>

我想在页面加载时很好地滑动一个二和三个。就像示例链接一样。

Answer 1

您可以使用jQuery执行此操作。

基本上，内容设置为最初使用CSS时距左侧800px的偏移量。然后使用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>

Answer 2

<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，您可以参考* *demo

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

2 个答案: