-1

我有多个<div class="box">（一个用于页面的每个部分，例如一个用于幻灯片，一个用于新闻等）在 Windows 加载时向上滑动，但我想要做的是它开始向上滑动，延迟为2 秒，当用户滚动页面并且该部分对用户可见时。

$(window).load(function(){
    $('.box').addClass('boxload');
});

正如您在窗口加载时看到的那样，它添加了一个 css 类，它使 div 向上滑动，我可以看到第一个元素，但是当我滚动时，当然，其他div class="box"元素已经向上，我希望其他人在什么时候开始滑动该部分出现在屏幕上。的CSS

    .box {
  display: block;
  position: relative;
  width: 40%;
  height: 100px;
  margin: 0 auto;
  padding: 10px 20px;
  top: 95px;
  background: #E0563B;
  color: #fff;
  z-index: 6;
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
  box-shadow: 0 0 20px #000000, inset 0 -1px 3px #000000;
}
.boxload{
    position:relative !important;
    top:45px !important;
    -webkit-transition: all 3s ease-in-out;
  -moz-transition: all 3s ease-in-out;
  -o-transition: all 3s ease-in-out;
  transition: all 3s ease-in-out;
}

有什么建议么？

我试过这个

$("#last-post").scroll(function(){
$('.box').addClass('boxload');
});

但不工作...

4

1 回答 1

0

如果我理解正确：

每当您的用户滚动时，使用jQuery 滚动事件处理程序来获得通知。

然后使用window.setTimeout 函数在两秒（2000 毫秒）后调用您的函数。

使用element.getBoundingClientRect获取对象的绝对位置。相关问题。

最后，使用任何你想为盒子设置动画的技术。

如果我误解了您的帖子，请发表评论。

于 2013-09-26T10:22:24.717 回答