Increasing/decreasing 视频元素上的音频，通过 jQuery Waypoints 触发

Question

我有一个包含一系列 (HTML 5) 个视频的页面，这些视频的音频需要根据您在页面上的位置淡入或淡出（每个视频可能不同）。我正在使用 jQuery Waypoints 和 InView 插件来检测元素何时在视口中。我不确定如何始终如一地执行此操作，以免在音量仍在减小或增大时绊倒航路点时导致意外行为。

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

这是一次不一致的尝试，如果您触发 'enter' 而 'decVol' 仍然是运行，您将完全失去音量并且必须触发 '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();
    });
  }
});

如果我上下滚动太快，特别是如果我在页面中有多个 waypoints 这种类型，那么事件队列就会变得很长，并且我会淡化 ins/outs 发生在很久之后事件已经触发（不过，我目前更喜欢这个实现）。

关于如何更好地实现我想要的目标有什么建议吗？

Answer 1

在 animate() 函数前面加上 stop() 就是答案。类似于：

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

Increasing/decreasing 视频元素上的音频，通过 jQuery Waypoints 触发

Increasing/decreasing audio on a video element, triggered via jQuery Waypoints

javascript

jquery

html5-video

html5-audio

jquery-waypoints