Question

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

我现在希望图像在到达顶部框架div时淡出。我认为在它到达'hider'div的顶部之前需要fadeOut。我不知道如何使图像的顶部在达到这一点时消失。

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

MY ATTEMPT：

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>

FadeOut图像在顶部随着动画向上移动

1 个答案: