顶部的淡出图像随着动画向上移动

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>