x 秒后触发事件 (waypoints.js)答案

【问题标题】：trigger event after x seconds (waypoints.js)x 秒后触发事件 (waypoints.js)
【发布时间】：2017-12-13 20:47:11
【问题描述】：

我有一个包含 20 个部分的页面。每个部分都有不同的背景颜色。背景颜色在 waypoints.js 的帮助下通过淡入淡出改变：

var inview = new Waypoint.Inview({
  element: $('#trigger00')[0],
  enter: function(direction) {
    $("#bgwrap").animate({
      backgroundColor: '#fff'
    }, 'slow');
  },
})

var inview = new Waypoint.Inview({
  element: $('#trigger01')[0],
  enter: function(direction) {
    $("#bgwrap").animate({
      backgroundColor: '#51FFCB'
    }, 'slow');
  },
})

// etc.

现在的问题是，当我滚动浏览 5 个部分时。部分背景颜色更改 5 次。

我如何告诉这个脚本，它应该只在元素在视口中停留 x 秒时触发？我用 setTimeout 尝试了这个，但只得到了延迟，而不是我想要的效果。仅当元素 #trigger00 在视口中存在 x 秒时，我才想更改背景颜色。

【问题讨论】：

标签： javascript jquery jquery-waypoints

【解决方案1】：

注意，jQuery animate 不适用于background-color，它只适用于数字属性。您可以使用 css 过渡以获得更平滑的效果。你可以使用setTimeout。此外，您的代码的问题是您对所有块使用 #bgwrap 相同的元素，您应该使用不同的元素。

这是您尝试实现的类似目标的示例

jQuery(document).ready(function(){
new Waypoint({
  element: document.getElementById('block2'),
  handler: function(direction) {
	  setTimeout(function(){
    $("#block2").css('background-color', '#fff');		  	  }, 500)
  }
});	
new Waypoint({
  element: document.getElementById('block3'),
  handler: function(direction) {
	  $("#block3").css('background-color', '#2ecc71');
  }
});	
	new Waypoint({
  element: document.getElementById('block4'),
  handler: function(direction) {
$("#block4").css('background-color', '#e74c3c');
  }
});
});

.block{
	width: 100%;
	height: 100vh;
	background: #ffe;
	transition: all 0.2s linear;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div id="block1" class="block block1">
	<span>Block1</span>
</div>
<div id="block2" class="block block2">
	<span>Block2</span>
</div>
<div id="block3" class="block block3">
	<span>Block3</span>
</div>
<div id="block4" class="block block3">
	<span>Block4</span>
</div>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>	
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/noframework.waypoints.min.js">
	</script>	
</body>
</html>

我希望这会有所帮助。这里是上面sn-p的一个jsbin https://jsbin.com/mohonuv/edit?html,js,output

【讨论】：

我的脚本有效。使用 jquery ui 可以为背景颜色设置动画。如果触发器在视口中是 x 秒，我只想添加我的背景正在改变的可能性，你知道吗？我需要一些东西，比如“如果（这发生）x 秒（做这个）”
是的，您可以使用 jQuery ui 为背景设置动画，您可以使用 setTimeout，但由于您使用单个元素 (#bgwrap) 更改颜色，所有背景颜色将根据情况更改 4-5 次你有多少航点。考虑为每个航点背景使用不同的元素。你能为你的代码添加html吗？如果没有 html，我必须猜测并回答这个问题。
嗯好吧，我明白了。但我只有这个全屏 div (#bgwrap) - 这个 div 应该改变由航点触发的背景颜色，你知道吗？我怎么能用一个 div 做到这一点？
你能分享你的js代码的相关html吗？ #bgwrap 是这些航点的父元素吗？

【解决方案2】：

此类问题已在不同的上下文中得到解答。

请看这里：Add class when element reaches top of viewport

您可以使用带有动画延迟的 css3 animate 来完成您正在寻找的内容，而不仅仅是更改背景颜色。或者，您可以只添加一个转换延迟。

如果您想查看更新的小提琴，请告诉我。

【讨论】：