Javascript 为可见的长方体阴影设置动画

我们有一个图像，希望通过添加一个类来设置它在页面上可见时的框阴影的动画。下面的代码适用于其他可见的元素，但不会将该类添加到所需的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');

        }

    }); 

/*突出赢家的边界*/
$（'.img winner'）。每个（函数（i）{
变量bottom\u of_object=$（this.offset（）.top+$（this.outerHeight（）；
var bottom_of_window=$（window.scrollTop（）+$（window.height（））；
/*如果对象在窗口中完全可见，请设置边框或框阴影的动画*/
if（窗口的底部>对象的底部）{
$（this）.closest（'.testshadow'）.addClass（'greenit'）；
}
}); 

肯定

。最近的

不是正确的选择，因为它将搜索相关元素的父元素。将其更改为

$（this.next（）.addClass（'greenit'）

或to

$（this）.next（'.testshadow'）.addClass（'greenit'）如果中间可能有兄弟姐妹。
是，根据文档，最近的选择不正确

最近的（选择器）

对于集合中的每个元素，通过测试元素本身并在DOM树中向上遍历其祖先，获取与选择器匹配的第一个元素

你可以用

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

.next（'.test shadow'）
如果entry.sides（'.test shadow'）之间存在同级