通過jQuery Waypoint觸發視頻元素上的音頻增加/減少

Question

我有一系列（HTML 5）視頻的頁面，其音頻需要淡入或淡出，具體取決於您在頁面上的位置（它可能不同爲每個視頻）。我使用jQuery Waypoint和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」仍然在運行，你完全失去卷，且觸發一個「退出」，等待，然後觸發「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);