Người Viết : ViKiMi Editor

Sự kết hợp phương thức Stop với Toggling Animations tạo nên một cách làm mới
Như chúng ta đã biết phương thức Stop() cho phép dừng các hiệu ứng hoặc hoạt ảnh. Vậy chắc hẳn phương thức Stop() cũng sẽ đem lại một sự mới lạ và có thể mang lại những cách làm khác. Để thấy được phương thức Stop() có thể làm như thế nào, đồng thời chúng ta sẽ thấy gì đặc biệt khi sử dụng Stop() ? Hãy xem có thể làm gì với phương thức này?
Trong phần này sẽ xem những cách khác nhau có thể làm với Stop()
+ Khi bạn muốn tiếp tục sau khi kích hoạt Stop() thì chúng ta làm thế nào?
+ Chúng ta có thể tạo một Toggle kết hợp Stop() hay không?
+ Có những cách nào làm việc ?
A ] TIẾP TỤC SAU KHI KÍCH HOẠT STOP METHOD
Chúng ta giả sử có một kịch bản cần phải tiếp tục khi Stop() được gọi.
Hãy xem đoạn Mã sau đây :
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#stop").click(function() {
$("div").stop( true, false );
});
$("#start").click(function(){
$("div").animate({
left: '250px',
height: '+=150px',
width: '+=150px'
},6000);
});
});
</script>
</head>
<body>
<button id="stop">Stop Animation</button>
<button id="start">Start Animation</button>
<p>Mặc định, phần tử HTML luôn là vị trí tĩnh không thể di chuyển. Để thao tác vị trí phần tử HTML, hãy thiết lập thuộc tính CSS của phần tử là relative, fixed, absolute</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
PHẦN TỬ DI CHUYỂN
</div>
</body>
</html>
+ Chúng ta có phần tử di chuyển có thể thực hiện di chuyển khi chọn button “Start”. Phần tử sẽ di chuyển nhờ phương thức animate()
+ Để dừng hoạt ảnh di chuyển >> chọn button “Stop”
+ Khi hoạt ảnh đã được dừng.
Nếu bạn muốn hiệu ứng này tiếp tục diễn ra, bạn có thể tiếp tục chọn button “Start”. Và hoạt ảnh này sẽ được tiếp tục diễn ra
[ Cũng có thể giúp hoạt ảnh này tiếp tục diễn ra cho đến kết thúc bằng cách thêm các tham số phù hợp cho phương thức Stop() ]
Chúng ta cũng có thể tham khảo ví dụ tiếp theo :
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#myflip").click(function(){
$("#panel").slideDown(5000);
});
$("#stop").click(function() {
$("#mypanel").stop( true, false );
});
});
</script>
<style>
#mypanel, #myflip {
padding: 5px;
font-size: 18px;
text-align: center;
background-color: #555;
color: white;
border: solid 1px #666;
border-radius: 3px;
}
#mypanel {
padding: 40px;
display: none;
}
</style>
</head>
<body>
<button id="stop">Stop sliding</button>
<div id="myflip">Click to slide down panel</div>
<div id="mypanel"> MY PANEL ! </div>
</body>
</html>
Ở đây chúng ta cũng sẽ thực hiện tương tự để có kết quả.
B ] TẠO TOGGLING ANIMATIONS
Chúng ta có 2 cách để tạo hiệu ứng toggling animations kết hợp cùng phương thức Stop()
1 ] Cách 1 :
Chúng ta có thể tạo 3 nút sự kiện đó là : Go / STOP / Back
Nút Go : Để bắt đầu hiệu ứng
Nút STOP : Để dừng hiệu ứng
Nút Back : Để tạo hiệu ừng quay lại. Nút này sẽ tạo chiều ngược lại cho hiệu ứng
Mã nguồn :
<!doctype html>
<html lang="en">
<head>
<style>
div {
position: absolute;
background-color: #abc;
left: 0px;
top: 30px;
width: 60px;
height: 60px;
margin: 5px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$( "#go" ).on( "click", function() {
$( ".block" ).animate({ left: "+=100px" }, 2000 );
});
$( "#stop" ).on( "click", function() {
$( ".block" ).stop();
});
// Start animation in the opposite direction
$( "#back" ).on( "click", function() {
$( ".block" ).animate({ left: "-=100px" }, 2000 );
});
});
</script>
</head>
<body>
<button id="go"> Go </button>
<button id="stop"> STOP! </button>
<button id="back"> Back </button>
<div class="block"> | </div>
</body>
</html>
2 ] Cách 2 :
Chúng ta sẽ sử dụng kỹ thuật gọi kết nối chuỗi trong jQuery. Điều này cho phép bạn chạy nhiều câu lệnh jQuery liên tiếp trên một phần tử.
Chúng ta sẽ xâu chuỗi lệp Stop và lệnh slideToggle trên một phần tử duy nhất để tạo hiệu ứng này.
Do đó khi Click Button “SlideToggle” thì sẽ có một xâu chuỗi lệnh thao tác trên phần tử duy nhất này : lệnh stop() và slideToggle()
Mã nguồn :
<!doctype html>
<html lang="en">
<head>
<style>
.myblock {
background-color: #abc;
border: 2px solid black;
width: 200px;
height: 80px;
margin: 10px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
var $block = $( ".myblock" );
// Toggle a sliding animation
$( "#mytoggle" ).on( "click", function() {
$block.stop().slideToggle( 1000 );
});
});
</script>
</head>
<body>
<button id="mytoggle"> slideToggle </button>
<div class="myblock"> | </div>
</body>
</html>
Thật đơn giản chúng ta đã đạt được mục đích :
+ Tiếp tục hiệu ứng sau khi kích hoạt STOP
+ Tạo Toggling animations kết hợp cùng STOP
Như vậy, Quả thực Không khó để tạo ra những hiệu ứng có thể ứng dụng và cho phép người dùng thao trên trên Website. Mang lại trải nghiệm khác nhau. Bạn có thể chọn những phương pháp thuật toán khác nhau để tạo ra một hiệu ứng theo yêu cầu.