javascript - 可见时动画盒阴影

Question

我们有一张图片，当它在页面上可见时，我们想通过向它添加一个类来为它的框阴影设置动画。下面的代码适用于其他可见的元素，但不会将类添加到我们想要的 div 中。也许 .closest 不是正确的选择。

有什么想法吗？

<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 不是正确的选择，因为它会搜索相关元素的父元素。将其更改为 $(this).next().addClass('greenit'); 或 $(this).next('.test-shadow').addClass('greenit '); 如果中间可能有 sibling 。