Question

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

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

jquery的：

<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

很难对它进行测试，因为我总是要刷新te te te看到效果，我只能猜测问题是什么。

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

编辑：

尝试

#slide5 {
z-index: 99999;
}

希望有所帮助

使用CSS动画作弊表时Div跳转

1 个答案: