backstretch.js의 지속 시간이 .animate() 지연과 일치하지 않습니다.

Question

서문 : jQuery 코드를 처음 작성하고 had help animateContinously() 함수를 작성하는 데 익숙하지 않습니다. 나는 backstretch 제어 이미지의 상단에 표시됩니다 텍스트합니다 (jquery-color.js plugin의 도움으로) 색상을 변경하려면 전체 브라우저 뷰포트/배경 슬라이드 쇼 및 jQuery animate() 기능을 가지고 backstretch.js을 사용하고

이있는 backstretch에 따라

이미지가 표시됩니다. 그것은 작동하지만 backstretch() duration과 animate() delay를 같은 번호, 즉 5000 (5 초)으로 설정하면 동기화되지 않습니다. 그래서 나는 그들을 1000 (1 초)만큼 상쇄하는 것을 시도했다. 텍스트와 배영 된 이미지는 원하는만큼 정확히 같은 시간에 페이드 인/아웃했다. 그러나 15 또는 그 이후의 트랜지션 후에는 다시 동기화되지 않는다.

지연 시간이 같은 시간이 & 인 이유에 대한 아이디어 나 도움이 필요합니까? 그리고/또는 1 초 오프셋이 처음에는 작동하고 왜 동기화되지 않는 이유는 무엇입니까? 여기 내 코드입니다 :

<script src="jquery.js"></script> 
<script src="jquery-color.js"></script> 
<script src="backstretch.js"></script> 
<script> 
    $.backstretch([ 
    "_img/bg01.jpg", 
    "_img/bg02.jpg" 
    ], { 
    fade: 1000, 
    duration: 4000 
    }); 
</script> 
<script> 
    function animateContinuously($element, attr, values) { 
    var i = 0, count = values.length; 
    setInterval(function() { 
     i = (i + 1) % count; 
     var props = {}; 
     props[attr] = values[i]; 
     $element.animate(props, 1000); 
    }, 5000); // // in sync with backstretch() if 1000 more, but falls out of sync after 15-18 transitions 

    animateContinuously($("#color-change1"), 'color', ['#de7056', '#4ec67f']); 
    animateContinuously($("#color-change2"), 'svgFill', ['#de7056', '#4ec67f']); 
</script> 
</body> 

Answer 1

배경 이미지의 사이클링 이후

및 setInterval()가 서로 연결되지 않습니다, 그들은 단지 항상 동기화 떨어질 것입니다. 해결책은 setInterval()을 포기하고 대신 the events triggered by the Backstretch plugin을 사용하는 것입니다. "backstretch.before"이벤트가 발생하면 애니메이션을 시작합니다.

$(window).on('backstretch.before', function() { 
    // Start animations here. 
}); 

이미지, 색상 및 기타 값의 수는 모두 같은, 당신은 할 수 있습니다 애니메이션 할 경우

var TRANSITION_DURATION = 1000, 
    PAUSE_DURATION = 4000; 

// Note: These arrays should all have the same length. 
var IMAGES = ['_img/bg01.jpg', '_img/bg02.jpg'], 
    COLORS = ['#de7056', '#4ec67f']; 

var index = 0; 

$.backstretch(IMAGES, { 
    fade: TRANSITION_DURATION, 
    duration: PAUSE_DURATION 
}); 

$(window).on('backstretch.before', function() { 
    index = (index + 1) % IMAGES.length; 
    $('#color-change1').animate({ backgroundColor: COLORS[index] }, TRANSITION_DURATION); 
    $('#color-change2').animate({ svgFill: COLORS[index] }, TRANSITION_DURATION); 
}); 

jsfiddle

을 값의 배열이 모두없는 경우 같은 길이라면 this jsfiddle과 같은 것을 할 수 있습니다.