淡出图像在顶部随动画向上移动时

Question

我有一个绝对定位的图像，它正在使用jquery animate向上移动。它被div隐藏在顶部和底部(效果是观众看到图像在手机屏幕上向上滚动(。

我现在希望图像在到达顶部帧div 时淡出。我认为它需要在到达"隐藏者"div 的顶部之前淡出。我不知道如何使图像的顶部在达到这一点时褪色。

.HTML

 <div class="comments-hider">
     <img id="comments-feed" src="images/mobilestory-comments.png" alt="">
 </div>

.CSS：

.comments-hider-image{
    position: absolute;
    top: 0;
    left: 15px;
    height: 696px;
    overflow-y: hidden;
    z-index: 700;
    width: 348px;
}
#comments-feed{
    position: absolute;
    top: -9px;
    left: 30px;
    width: 624px;
    z-index: 600;
}

Jquery：

$("#comments-feed").animate({'top': '-1500px'}, 12000);

我的尝试：

var topOfOthDiv = $("#comments-feed").offset().top;
var nearTheTop  = $(".comments-hider").position({ top: 100, left: -200 });
if(topOfOthDiv > nearTheTop ) { //scrolled past the other div?
       $("#comments-feed").fadeOut(100);
        }

Answer 1

我假设您正在寻找类似以下内容的内容：

progress: function (animation, progress, remainingMs) {
    var h = $(this).position().top + $(this).height();
    if(h <= 0) {
        $(this).stop().animate({top: '-9px'});
    }
}

$("#comments-feed").animate({
        top: '-1500px'
    },
    {
        duration: 12000,
        progress: function (animation, progress, remainingMs) {
            var h = $(this).position().top + $(this).height();
            if (h <= 0) { //go back
                $(this).stop().animate({top: '-9px'});
            }
        }
    });

.comments-hider-image {
    position: absolute;
    top: 0;
    left: 15px;
    height: 696px;
    overflow-y: hidden;
    z-index: 700;
    width: 348px;
}
#comments-feed {
    position: absolute;
    top: -9px;
    left: 30px;
    width: 624px;
    z-index: 600;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="comments-hider">
    <img id="comments-feed" src="https://dummyimage.com/200x200/000/fff&text=1111" alt="">
</div>