Question

我有一个包含一系列（HTML 5）视频的页面，其音频需要淡入或淡出，具体取决于您在页面上的位置（每个视频可能不同）。我正在使用带有InView插件的jQuery Waypoints来检测元素何时在视口中。我不确定如何一致地做到这一点，这样当你在音量仍在下降或增加时你绊倒一个航点时不会引起意外行为。

var waypoint = new Waypoint.Inview({
  element: $('#element')[0],
  enter: function() {
    $('#element')[0].volume = 0;
    $('#ielement')[0].play();
    incVol($('#element')[0]);
  },
  entered: function() {},
  exit: function() {},
  exited: function() {
    decVol($('#element')[0]);
  }
});

function incVol(e) {
  setTimeout(function() {
    if ((e.volume + .05) < 1) {
      e.volume += .05;
      incVol(e);
    } else {
      e.vol = 1;
    }
  }, 100)
}

function decVol(e) {
  setTimeout(function() {
    if ((e.volume - .05) > 0) {
      e.volume -= .05;
      decVol(e);
    } else {
      e.volume = 0;
      e.pause();
    }
  }, 100)
}

这是一种不一致的尝试，如果你在'decVol'仍在运行时触发'enter'你完全失去音量并且必须触发'退出'，等待，然后再次触发'enter'。

我也尝试过jQuery的音量动画。但这似乎也不一致。

var waypoint = new Waypoint.Inview({
  element: $('#element')[0],
  enter: function() {
    $('#element')[0].volume = 0;
    $('#element')[0].play();
    $('#element').animate({
      volume: 1
    }, 1000);
  },
  entered: function() {},
  exit: function() {},
  exited: function() {
    $('#element').animate({
      volume: 0
    }, 1000, function() {
      $('#element')[0].pause();
    });
  }
});

如果我上下滚动得太快，特别是如果我在页面中有多个这种类型的航路点，那么事件队列变得非常广泛，并且在事件触发后我发生了很少的输入/输出（尽管如此，我暂时更喜欢这种实现）。

关于如何实现我想要的更好的建议？

Answer 1

使用stop（）作为animate（）函数的前缀就是答案。类似的东西：

$('#element').stop(true, false).animate({
  volume: 1
}, 1000);

增加/减少视频元素上的音频，通过jQuery Waypoints触发

1 个答案: