jQuery 웨이 포인트를 통해 트리거되는 비디오 요소의 오디오 증가/감소

Question

페이지의 위치에 따라 오디오가 페이드 인 또는 아웃 될 필요가있는 일련의 (HTML 5) 비디오가있는 페이지가 있습니다. 각 동영상에 대해). InView 플러그인과 함께 jQuery Waypoint를 사용하여 요소가 뷰포트에있을 때를 감지합니다. 볼륨을 계속 줄이거 나 늘리면서 웨이 포인트를 돌릴 때 예기치 않은 동작을 일으키지 않도록 일관되게 수행하는 방법을 모르겠습니다. 당신이 트리거 'decVol는'아직도 당신이 완전히 볼륨을 잃고,에 '종료'트리거 기다린 다음 트리거가 실행되는 동안 다시 '입력' '입력'경우

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

이 일관성이없는 시도이다.

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