모든 jQuery 애니메이션을 일시 정지하는 방법은 무엇입니까?

Question

일부 사용자 상호 작용을하기 위해 페이지의 모든 애니메이션을 일시 중지 한 다음 사용자가 응답 한 즉시 모든 애니메이션을 다시 시작해야하는 경우가 있습니다.

예를 들어 1 초 동안 페이드 인하는 애니메이션이 있고 400ms가 지나야 애니메이션이 일시 중지 될 수 있습니다. 40 % 불투명도로 멈춰야하고 다시 시작할 때까지 머물러야합니다. 그 시점에서 중단 된 부분부터 다시 시작하여 40 %에서 100 %까지 페이드 인을 완료하는 데 600 밀리미터를 소비해야합니다.

페이지에 동시에 여러 애니메이션이있을 수 있으며 모든 애니메이션을 일시 중지하고 싶습니다. 또한 일부 애니메이션의 경우 완료된 후에도 계속 진행하기 위해 대기중인 추가 애니메이션이있을 수 있으며 모든 작업이 필요합니다. 다시 시작하면 현재 애니메이션을 완료해야하고 아무 일도 발생하지 않은 것처럼 큐의 다음 애니메이션을 시작해야합니다 .

jQuery에는 애니메이션 일시 중지 기능이 내장되어 있지 않은 것 같습니다. 가장 가까운 부분은 .stop()입니다. 애니메이션의 현재 지점에서 멈추지 만 나중에 다시 시작할 수는 없습니다. 큐의 다음 애니메이션으로 즉시 이동하거나 애니메이션 대기열을 완전히 지 웁니다.

나중에 애니메이션을 다시 시작할 수있는 방법으로 애니메이션을 일시 중지 할 수 있습니까?

Answer 1

/일시 정지 pause plugin이 상황에 대해 잘 작동합니다

다시 시작 옵션.

HTML

<div class=demo> 
    <div id="box1" class="animationToPause"></div> 
    <div id="box2" class="animationToPause"></div> 
    <div id="box3" class="animationToPause"></div> 
</div> 
<input id="btnPause" type="button" value="Pause Animations" /> 

CSS

div.demo { 
    border: 1px solid #555; 
    margin: 1em auto; 
    width: 550px; 
} 
#box1, #box2, #box3 { 
    width: 100px; 
    height: 100px; 
    position: relative; 
} 
#box1 { 
    background: #0C0; 
} 
#box2 { 
    background: #090; 
} 
#box3 { 
    background: #060; 
}​ 

자바 스크립트

$(function() { 
    //Begin animation on boxes 
    $("div[id^='box']").each(function() { 
     phase1($(this)); 
    }); 

    //Setup animation pause/resume on hover 
    $("div[id^='box']").hover(function() { 
     $(this).pause(); 
    }, function() { 
     $(this).resume(); 
    }); 
}); 

//Toggle animation pause/resume on button click 
$("#btnPause").toggle(
    function() { 
     $(".animationToPause").pause(); 
    }, function() { 
     $(".animationToPause").resume() 
}); 

//Animation 1 
function phase1($this) { 
    $this.animate({ 
     left: 450 
    }, 2000, 'swing', function() { 
     phase2($this) 
    }); 
} 

//Animation 2 
function phase2($this) { 
    $this.animate({ 
     left: 0 
    }, 2000, 'swing', function() { 
     phase1($this) 
    }); 
}​ 

여기,436있어.

무력 옵션

당신이 찾고있는없는 것을 확실히

하지만 관련.

설정 jQuery.fx.off = true;은 모든 애니메이션을 즉시 중지합니다.