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

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'，您会完全失去音量，必须触发 'exit'，等待，然后再次触发 '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

在 animate() 函数前面加上 stop() 就是答案。 比如：

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