Làm cách nào để tạm dừng tất cả hoạt ảnh jQuery?

Question

Tôi sẽ có các trường hợp tôi cần tạm dừng tất cả hoạt ảnh trên trang để thực hiện tương tác của người dùng và sau đó tiếp tục tất cả các hoạt ảnh ngay khi người dùng trả lời.

Ví dụ: tôi có thể có hoạt ảnh đang mờ dần trong khoảng thời gian 1 giây và 400 m trong tôi cần tạm dừng. Nó sẽ dừng lại ở mức Opacity 40%, và ở đó cho đến khi tôi tiếp tục, tại thời điểm đó nó nên chọn nơi nó rời đi và chi 600ms khác hoàn thành phai của nó từ 40% đến 100%.

Có thể có nhiều hoạt ảnh trên trang cùng một lúc và tôi muốn tạm dừng tất cả chúng. Ngoài ra, một số hoạt ảnh có thể có các hình động tiếp tục xếp hàng để tiếp tục sau khi chúng hoàn thành và mọi thứ cần phải hoạt động: khi tôi tiếp tục, hoạt ảnh hiện tại cần hoàn thành và sau đó, hình động tiếp theo cần bắt đầu, giống như không có gì xảy ra .

jQuery dường như không có bất kỳ hỗ trợ tích hợp nào để tạm dừng hoạt ảnh; gần nhất tôi có thể tìm thấy là .stop(), sẽ dừng ở vị trí hiện tại trong hoạt ảnh nhưng không thể tiếp tục sau đó; và nó sẽ chuyển sang hoạt ảnh tiếp theo trong hàng đợi ngay lập tức hoặc xóa hoàn toàn hàng đợi hoạt ảnh.

Làm cách nào để tạm dừng hoạt ảnh theo cách sẽ cho phép tôi tiếp tục lại sau?

Answer 1

Pause/Resume Lựa chọn

Các pause plugin sẽ làm việc tốt cho tình trạng này.

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; 
}​ 

Javascript

$(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) 
    }); 
}​ 

Dưới đây là a working fiddle to demonstrate.

Brute Force Lựa chọn

Chắc chắn không phải những gì bạn đang tìm kiếm, nhưng có liên quan.

Đặt jQuery.fx.off = true; sẽ ngừng tất cả hoạt ảnh ngay lập tức.