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 を使用して左から 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>

于 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 に答える