jquery - 使用CSS动画备忘单时div跳转

Question

我刚刚添加了 CSS animation cheat sheet到我的网站。但是现在当我向下滚动到我已经实现动画的图像时，div 会扩展到页面底部。动画结束后，div 大小又恢复正常。

它发生的页面:http://keessonnema.nl/

html:

<div class="wrapper portfolio">
    <span class="spacer"></span>

    <div id="pic-wrap">
    <img class="pic" src="http://multy-service.ru/media/pictures/imac-3.png" alt="Imac" width="450px"/>
    </div>

    <div class="text-wrap">
        <h1>
            Webdesign sample text
        </h1>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sed ipsum blandit, tristique risus vel, volutpat rbi at lacus et dolor tincidunt pretium sollicitudin in leo.
            <a href="">Lees meer...></a>
        </p>
    </div>

CSS:

#pic-wrap{
float: right;
visibility: hidden;
backface-visibility: hidden;
}

j查询:

<script>
    $(window).scroll(function() {
        $('.pic').each(function(){
        var imagePos = $(this).offset().top;

        var topOfWindow = $(window).scrollTop();
            if (imagePos < topOfWindow+400) {
                $(this).addClass("slideUp");
            }
        });
    });
</script>

可能是什么问题？

Answer 1

很难测试它，因为我总是需要刷新页面才能看到效果，我只能猜测可能是什么问题。

可能是因为您的默认 (iMac) 图像高度超过 890 像素。尝试添加高度较小的图像。您也可以尝试将 div 幻灯片设置为溢出:隐藏和固定高度/或最大高度。

编辑:

尝试

#slide5 {
z-index: 99999;
}

希望对你有帮助