Question

首先，我很抱歉我的英语不好，但我是意大利人。

现在是问题的时候了：我有一个div，类hideme，我希望在页面向下滚动时为它设置动画。

我已阅读并在此网站上关注了一个问题，但它不起作用。

页面的HTML代码为：

<section class="maps"><div id="aboutus" class="bgParallax" data-speed="15">
  <span class="space"></span>
  <div class="b-text">
    <p>Stupisciti.</p>
    [one_third]
     <div class="hideme">
      <h3 class="parallax"><i class="icon-eye-open"></i> La TUA pubblicità</h3>
     </div>
    [/one_third]
  </div>
</section>

CSS代码是：

.bgParallax {
    font-family: Source Sans Pro;
    color:#FFF;
    font-weight: 100;
    width: 100%;
    position: relative;
    height: 100%; 
    background-position: 50% 0;
    background-repeat: repeat;
    background-attachment: fixed;
}

.maps {
    height: 400px;
}

.b-text {
    padding-top: 40px;
}

.b-text p {
    font-size: 100px;
    text-align: center;
}

.hideme {
    opacity:0;
}

.parallax {
    font-size: 40px;
    text-align: center;
    margin-top: 50px;
    color: #FFF;
}

.parallax i {
    color: #05B5FA;
    -webkit-text-stroke: 1px;
    -moz-text-stroke: 1px;
    -o-text-stroke: 1px;
    -ms-text-stroke: 1px;
    background-color: #FFF;
    padding: 10px;
    border-radius: 100px;
    margin-right: 10px;
}

而jQuery代码是：

$(window).scroll( function(){
    $('.hideme').each( function(i){
        var bottom_of_object = $(this).position().top + $(this).outerHeight();
        var bottom_of_window = $(window).scrollTop() + $(window).height();
        if( bottom_of_window > bottom_of_object ){
            $(this).animate({'opacity':'1'},500);
                }
        }); 
    });
});

我不知道这些信息是否重要，但我已将代码放入正文流程中的脚本标记中。

非常感谢所有帮助

在ScrollTop事件中淡入div

0 个答案: