jQueryウェイポイント経由でトリガーされたビデオ要素のオーディオを増減させる

Question

ページ上の自分の位置に応じて音声をフェードインまたはフェードアウトする必要がある一連の（HTML 5）ビデオを含むページがあります。各ビデオについて）。 InViewプラグインでjQueryウェイポイントを使用して、要素がビューポートにあるときを検出しています。私は一貫してそれを行う方法がわからないので、ボリュームがまだ減少または増加している間にウェイポイントをトリップしたときに予期しない動作を引き起こさないようにします。

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」はまだあなたが完全にボリュームを失うと、「終了」をトリガー待ってから、再度「入力」トリガする必要が実行されている間「と入力し」引き金場合、これは、一貫性のない試みです。

また、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);