1

基本的に、ここでやろうとしているのは、ユーザーがページの一番下までスクロールしたときに、3 div を 1 つずつフェードインすることです。

オンラインで検索したところ、waypoints と呼ばれる jquery プラグインを使用してこれを実現できることがわかりました。しかし、私は Jquery の初心者であり、これを行う方法が本当にわかりません。

誰かが私のコードを親切に見て、私が何を間違えたのか教えてくれれば、本当に役に立ちます!

HTMLは次のとおりです。

    <!--#Div1-->
    <div class="span4" id="fadein1" style="display:none">
    <img src="images/41.jpg" alt="41%" style="margin-right: 10px;" id="41">
        <h2>Boba</h2> 
        <p>We strive for <b>perfection</b> when we prepare our boba 
to use. Not under, nor overcooked to mush. Just right and still chewy.</p>

    </div><!-- /.span4 -->
        <div class="span4" id="fadein2" style= "display:none;">
        <img src="images/43.jpg" alt="43%" style="" id="43">
          <h2>Tea Leaves</h2>
          <p>Tea Powders? <b>NEVER!</b> Premixes? <b>Absolutely not!</b> 
We use only the best quality house blend tea leaves.</p>

    </div><!-- /.span4 -->    

    <div class="span4" id="fadein3" style="display:none;">
          <img src="images/44.jpg" alt="44%" style="" id="44">
          <h2>Customized Blend</h2>
          <p>It is our goal to customize your drink the way 
<b>you</b> want it to be. 75% sugar? Light ice? You name 
it, and we will make it happen!</p>

    </div><!-- /.span4 -->

JSはこちら

$(document).ready(function() {

    // call waypoint plugin
    $("#fadin1").waypoint( function( bottom-in-view ) {
        $(this).fadein(1500);
   }, {
        offset: 'bottom-in-view'
   }

   $("#fadin2").waypoint( function( bottom-in-view ) {
        $(this).fadein(2000);
   }, {
        offset: 'bottom-in-view'
   }

   $("#fadin3").waypoint( function( bottom-in-view ) {
        $(this).fadein(2500);
   }, {
        offset: 'bottom-in-view'
   }
);
4

1 に答える 1

0

このスクリプトを試してください。スクロールが div に達すると、div はフェードインします。

これらの非表示の div の上下にいくつかのコンテンツが必要だと思います。

$(document).ready(function() {
$('#fadein1').waypoint(function(event, direction) {
    $(this).fadeIn(1500);
}, {
    offset: function() {
       return -$(this).height();
    }
});

$('#fadein2').waypoint(function(event, direction) {
    $(this).fadeIn(2000);
}, {
    offset: function() {
       return -$(this).height();
    }
});

$('#fadein3').waypoint(function(event, direction) {
    $(this).fadeIn(2500);
}, {
    offset: function() {
       return -$(this).height();
    }
});
});

HTMLは次のようにする必要があります...

<div>Top content 1</div>
<div>Top content 1</div>

<div>Your hidden div 1</div>
<div>Your hidden div 2</div>
<div>Your hidden div 3</div>

<div>Below content 1</div>
于 2013-05-30T03:17:50.823 に答える