なぜ私のJSは1つの要素のために働いていますか？

私は以下のJSを持っていますが、それはelem1と完全に連携していますが、何らかの理由で残りの要素（elem2、elem3、elem4）では機能しません。私はコードのどこにエラーがあるかを見つけようとしていますが、バグはどこにあるのか分かりません。なぜ私のJSは1つの要素のために働いていますか？

コードの背後にあるアイデアは、スクロールしてIDがどこにあるdivを表示するか新しいクラスを追加する必要があります。

私は問題を解決できないと思いますか？それを修正する助けてください？

おかげ

function isElementInViewport(elem) { 
 
    var $elem = $(elem); 
 
    var scrollElem = ((navigator.userAgent.toLowerCase().indexOf('webkit') != -1) ? 'body' : 'html'); 
 
    var viewportTop = $(scrollElem).scrollTop(); 
 
    var viewportBottom = viewportTop + $(window).height(); 
 
    var elemTop = Math.round($elem.offset().top); 
 
    var elemBottom = elemTop + $elem.height(); 
 
    return ((elemTop < viewportBottom) && (elemBottom > viewportTop)); 
 
} 
 

 
function checkAnimation() { 
 
    var $elem1 = $('#hintro'); 
 
    var $elem2 = $('#hpro'); 
 
    var $elem3 = $('#hcontact'); 
 
    var $elem4 = $('#hquote'); 
 

 
    if ($elem1.hasClass('fadeInUp')) return; 
 
    if (isElementInViewport($elem1)) { 
 
    $elem1.addClass('fadeInUp'); 
 
    } 
 
    if ($elem2.hasClass('fadeInLeft')) return; 
 
    if (isElementInViewport($elem2)) { 
 
    $elem2.addClass('fadeInLeft'); 
 
    } 
 
    if ($elem3.hasClass('fadeInRight')) return; 
 
    if (isElementInViewport($elem3)) { 
 
    $elem3.addClass('fadeInRight'); 
 
    } 
 
    if ($elem4.hasClass('fadeInUp')) return; 
 
    if (isElementInViewport($elem4)) { 
 
    $elem4.addClass('fadeInUp'); 
 
    } 
 
} 
 
// Capture scroll events 
 
$(window).scroll(function() { 
 
    checkAnimation(); 
 
});

<body> 
 
    <div id="hintro" class="col-12 animated">test1</div> 
 
    <div id="hpro" class="col-12 animated">test2</div> 
 
    <div id="hcontact" class="col-12 animated">test3</div> 
 
    <div id="hquote" class="col-12 animated">test4</div> 
 
</body> 
 

 
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>

出典

2017-03-05 Anonymous

jQueryは含まれていません。 – Li357

通常、それは 'return'です。 –

Javaスクリプトが非同期にロードされていて、このスクリプトがjqueryより高速にロードされていると仮定すると、jqueryにはアクセスできません。 –

最初のクラスを持っていた後、「fadeInUp他人のどれもチェックされませ得ることを意味しているあなたは戻っています。

function checkAnimation() { 
    var $elem1 = $('#hintro'); 
    var $elem2 = $('#hpro'); 
    var $elem3 = $('#hcontact'); 
    var $elem4 = $('#hquote'); 

    if (!$elem1.hasClass('fadeInUp') && (isElementInViewport($elem1)) { 
     $elem1.addClass('fadeInUp'); 
    } 
    if (!$elem2.hasClass('fadeInLeft') && (isElementInViewport($elem2)) { 
     $elem2.addClass('fadeInLeft'); 
    } 
    if (!$elem3.hasClass('fadeInRight') && (isElementInViewport($elem3)) { 
     $elem3.addClass('fadeInRight'); 
    } 
    if ($elem4.hasClass('fadeInUp') && (isElementInViewport($elem4)) { 
     $elem4.addClass('fadeInUp'); 
    } 
}

出典

2017-03-05 21:45:15

なぜ私のJSは1つの要素のために働いていますか？

答えて

関連する問題