Question

我有一个包含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秒时才更改背景颜色。

Answer 1

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

以下是您尝试实现类似内容的示例

＆＃13;

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');
  }
});
});

＆＃13;

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

＆＃13;

<!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>

＆＃13;

我希望这会有所帮助。以下是上述代码段https://jsbin.com/mohonuv/edit?html,js,output

的jsbin

Answer 2

此类问题已在不同背景下得到解答。

请参见此处：Add class when element reaches top of viewport

您可以使用带有动画延迟的css3动画，而不仅仅是更改背景颜色，以便完成您要查找的内容。或者，您可以添加转换延迟。

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

x秒后触发事件（waypoints.js）

2 个答案: