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');。

Answer 2

是最接近的不是正确的选择，根据文档

.closest（选择器）

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

你可以使用。

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

动画框阴影可见时

2 个答案: