带有 css 的 jQuery 动画无法正常工作

Question

您好，感谢您阅读本文。

我的 jQuery 有问题，我试图在向下滚动时更改文章的可见性和顶部填充。问题是我想让“动画”变慢，但它立即改变而不是慢慢改变。

这是我的部分和

<section class="SectionDesignWhite Section2">
                <article class="textSec2">LOST OF TEXT</article>
                <article class="textSec2 PadLeft30">LOST OF TEXT2</article>
                <article class="textSec2 PadLeft30">LOST OF TEXT3</article>
        </section>

我的 CSS 代码:

.Section2 article {
    min-width: 300px;
    max-width: 300px;
    min-height: 300px;
    float: left;
    padding-top: 100px;
    visibility: hidden;
}

我的 jQuery 脚本:

     $(window).scroll(function () {
        if ($(this).scrollTop() > 450) {
            $('.Section2 article').css({"visibility": "visible", "padding-top": "50px"}, 'slow');
        }
    });

我希望在被卡了几个小时后，我已经清楚地说明了我要创建的内容。似乎根本找不到有效的答案。

感谢您查看。

Answer 1

您可以使用 animate() 但它只适用于某些属性，在这种情况下您不能为 visibility 设置动画，您可以使用 opacity 像这样:

CSS

.Section2 article {
    min-width: 100px;
    max-width: 100px;
    min-height: 100px;
    float: left;
    background:Red;
    padding-top: 100px;
    visibility: hidden;
    opacity:0;/*Add this*/
}

查询

$('.Section2 article').css('visibility', "visible")
                      .animate({paddingTop: "50px", opacity : '1'}, 'slow');

查看此演示 http://jsfiddle.net/3gREz/