ボックスシャドウを表示するときにアニメーションを表示する

Question

画像があり、ページに表示されているときにその画像にボックスの影を付けるには、画像を追加する必要があります。以下のコードは、他の要素が表示されているときに機能しますが、必要なdivにクラスを追加しません。おそらく、最も正確な選択は適切ではありません。

アイデア？

間違い

<div class="test-thewinner"> 
<img class="img-winner" src="xxx.png" alt="test-desktop"> 
<div class="test-shadow"></div> 
</div> 



       /* highlight border of winner */ 
    $('.img-winner').each(function(i){ 

     var bottom_of_object = $(this).offset().top + $(this).outerHeight(); 
     var bottom_of_window = $(window).scrollTop() + $(window).height(); 

     /* If the object is completely visible in the window, animate border or box shadow */ 
     if(bottom_of_window > bottom_of_object){ 

     $(this).closest('.test-shadow').addClass('greenit'); 

     } 

    }); 

Answer 1

はい最も近い要素をテストすることによってセレクタに一致する最初の要素を取得し、セット内の各要素について

.closest（セレクタ）

ドキュメントごとに、正しい選択ではありませんDOMツリー内でその先祖まで移動してを上回ります。

使用できます。

$(this).siblings('.test-shadow:first').addClass('greenit'); 

Answer 2

.closestそれが問題になっている要素の親を検索しますので、正しい選択ではありません。間に兄弟がある場合は、$(this).next().addClass('greenit');または$(this).next('.test-shadow').addClass('greenit');に変更してください。