Question

我有多个<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');
});

但是没有用......

Answer 1

如果我理解正确的话：

使用jQuery scroll event handler，以便在用户滚动时收到通知。

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

使用element.getBoundingClientRect获取对象的绝对位置。 Related question.

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

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

滚动时Div元素动画

1 个答案: