Trong bài viết này, chúng ta sẽ xem cách sử dụng các phương thức JQuery khác nhau để tạo hoạt ảnh.
hide() Và show()Phương thức hide() chỉ đơn giản là đặt kiểu nội tuyến display: none cho các mục đã chọn. Ngược lại, phương thức show() khôi phục các thuộc tính hiển thị.
Hãy xem một ví dụ:
<script>
$(document).ready(function(){
// Hide displayed paragraphs
$(".hide-btn").click(function(){
$("p").hide();
});
// Show hidden paragraphs
$(".show-btn").click(function(){
$("p").show();
});
});
</script>Trong trường hợp đầu tiên, đoạn văn bị ẩn khi bạn nhấp vào nút (hide-btn), trong trường hợp thứ hai, đoạn văn được hiển thị khi bạn bấm vào nút (show-btn).
Bạn cũng có thể chỉ định tham số thời lượng để tạo hoạt ảnh cho hiệu ứng hiển thị và ẩn trong một khoảng thời gian.
Thời lượng có thể được chỉ định bằng cách sử dụng một trong các chuỗi trướcdefiđêm 'slow' o 'fast', hoặc trong một số mili giây, để có độ chính xác cao hơn; giá trị cao hơn biểu thị hoạt ảnh chậm hơn.
<script>
$(document).ready(function(){
// Hide displayed paragraphs with different speeds
$(".hide-btn").click(function(){
$("p.normal").hide();
$("p.fast").hide("fast");
$("p.slow").hide("slow");
$("p.very-fast").hide(50);
$("p.very-slow").hide(2000);
});
// Show hidden paragraphs with different speeds
$(".show-btn").click(function(){
$("p.normal").show();
$("p.fast").show("fast");
$("p.slow").show("slow");
$("p.very-fast").show(50);
$("p.very-slow").show(2000);
});
});
</script>chuỗi trướcdefinita 'fast' cho biết thời lượng là 200 mili giây, trong khi chuỗi 'slow' cho biết thời lượng là 600 mili giây.
Chúng ta có thể chỉ định một chức năng của callback được thực thi sau khi hoàn thành phương thức show() hoặc dell ' hide()
<script>
$(document).ready(function(){
// Display alert message after hiding paragraphs
$(".hide-btn").click(function(){
$("p").hide("slow", function(){
// Code to be executed
alert("The hide effect is completed.");
});
});
// Display alert message after showing paragraphs
$(".show-btn").click(function(){
$("p").show("slow", function(){
// Code to be executed
alert("The show effect is completed.");
});
});
});
</script>Phương thức jQuery toggle() hiển thị hoặc ẩn các mục theo cách mà nếu mục đó được hiển thị ban đầu, thì mục đó sẽ bị ẩn đi; ngược lại nếu bị ẩn, nó sẽ được hiển thị (thực tế là chuyển đổi khả năng hiển thị của nó).
<script>
$(document).ready(function(){
// Toggles paragraphs display
$(".toggle-btn").click(function(){
$("p").toggle();
});
});
</script>Tương tự, bạn có thể chỉ định tham số duration cho phương pháp toggle(), theo cách để làm sinh động quá trình chuyển đổi giữa hiển thị và ẩn, giống như các phương thức show() e hide()
<script>
$(document).ready(function(){
// Toggles paragraphs with different speeds
$(".toggle-btn").click(function(){
$("p.normal").toggle();
$("p.fast").toggle("fast");
$("p.slow").toggle("slow");
$("p.very-fast").toggle(50);
$("p.very-slow").toggle(2000);
});
});
</script>Tương tự, bạn cũng có thể chỉ định một chức năng của callback cho phương pháp toggle().
<script>
$(document).ready(function(){
// Display alert message after toggling paragraphs
$(".toggle-btn").click(function(){
$("p").toggle(1000, function(){
// Code to be executed
alert("The toggle effect is completed.");
});
});
});
</script>fadeIn() e fadeOut()Bạn có thể sử dụng các phương thức jQuery fadeIn()e fadeOut() để hiển thị hoặc ẩn các thành phần HTML, tăng dần hoặc giảm độ mờ của chúng và tạo hiệu ứng mờ dần.
<script>
$(document).ready(function(){
// Fading out displayed paragraphs
$(".out-btn").click(function(){
$("p").fadeOut();
});
// Fading in hidden paragraphs
$(".in-btn").click(function(){
$("p").fadeIn();
});
});
</script>Giống như các phương thức hiệu ứng jQuery khác, bạn có thể tùy ý chỉ định tham số thời lượng hoặc tốc độ cho các phương thức fadeIn()e fadeOut(), để kiểm soát thời lượng mờ dần. Thời lượng có thể được chỉ định bằng cách sử dụng một trong các chuỗi trướcdefiđêm 'slow' o 'fast', hoặc tính bằng mili giây; giá trị cao hơn biểu thị hoạt ảnh chậm hơn.
<script>
$(document).ready(function(){
// Fading out displayed paragraphs with different speeds
$(".out-btn").click(function(){
$("p.normal").fadeOut();
$("p.fast").fadeOut("fast");
$("p.slow").fadeOut("slow");
$("p.very-fast").fadeOut(50);
$("p.very-slow").fadeOut(2000);
});
// Fading in hidden paragraphs with different speeds
$(".in-btn").click(function(){
$("p.normal").fadeIn();
$("p.fast").fadeIn("fast");
$("p.slow").fadeIn("slow");
$("p.very-fast").fadeIn(50);
$("p.very-slow").fadeIn(2000);
});
});
</script>tác dụng của các phương pháp fadeIn() / fadeOut() nó tương tự như show() / hide(), nhưng không giống như các phương pháp show() / hide(), cái trước chỉ tạo hiệu ứng cho độ mờ đục của các phần tử mục tiêu và không tạo hiệu ứng cho kích thước của chúng.
Ngoài ra, bạn có thể chỉ định một chức năng của callback để chạy sau khi các phương pháp hoàn thành fadeIn() / fadeOut().
<script>
$(document).ready(function(){
// Display alert message after fading out paragraphs
$(".out-btn").click(function(){
$("p").fadeOut("slow", function(){
// Code to be executed
alert("The fade-out effect is completed.");
});
});
// Display alert message after fading in paragraphs
$(".in-btn").click(function(){
$("p").fadeIn("slow", function(){
// Code to be executed
alert("The fade-in effect is completed.");
});
});
});
</script>fadeToggle()Phương thức jQuery fadeToggle() hiển thị hoặc ẩn các phần tử đã chọn bằng cách tạo hoạt ảnh về độ mờ của chúng sao cho nếu phần tử được hiển thị ban đầu, phần tử đó sẽ bị mờ đi; nếu nó bị ẩn, nó sẽ mờ dần (tức là chuyển đổi hiệu ứng mờ dần).
<script>
$(document).ready(function(){
// Toggles paragraphs display with fading
$(".toggle-btn").click(function(){
$("p").fadeToggle();
});
});
</script>Bạn cũng có thể chỉ định tham số trọn đời cho phương thức fadeToggle() đối với các phương pháp fadeIn() / fadeOut(), để kiểm soát thời lượng hoặc tốc độ của hoạt ảnh mờ dần.
<script>
$(document).ready(function(){
// Fade Toggles paragraphs with different speeds
$(".toggle-btn").click(function(){
$("p.normal").fadeToggle();
$("p.fast").fadeToggle("fast");
$("p.slow").fadeToggle("slow");
$("p.very-fast").fadeToggle(50);
$("p.very-slow").fadeToggle(2000);
});
});
</script>Phương thức fadeToggle() cũng có khả năng chỉ định một hàm callback.
<script>
$(document).ready(function(){
// Display alert message after fade toggling paragraphs
$(".toggle-btn").click(function(){
$("p").fadeToggle(1000, function(){
// Code to be executed
alert("The fade-toggle effect is completed.");
});
});
});
</script>fadeTo()Phương thức jQuery fadeTo() nó tương tự như phương pháp fadeIn(), nhưng không giống như phương pháp fadeIn(), phương pháp fadeTo() cho phép bạn pha trộn các yếu tố xuống một mức độ mờ nhất định.
$(selector).fadeTo(speed, opacity, callback);tham số bắt buộc opacity chỉ định độ mờ cuối cùng của các phần tử đích có thể là một số từ 0 đến 1. Tham số duration o speed nó cũng được yêu cầu cho phương pháp này chỉ định thời lượng mờ dần của hoạt ảnh.
<script>
$(document).ready(function(){
// Fade to paragraphs with different opacity
$(".to-btn").click(function(){
$("p.none").fadeTo("fast", 0);
$("p.partial").fadeTo("slow", 0.5);
$("p.complete").fadeTo(2000, 1);
});
});
</script>slideUp() e slideDown()Phương thức jQuery slideUp() e slideDown() được sử dụng để ẩn hoặc hiển thị các thành phần HTML bằng cách giảm dần hoặc tăng chiều cao của chúng (tức là cuộn chúng lên hoặc xuống).
<script>
$(document).ready(function(){
// Slide up displayed paragraphs
$(".up-btn").click(function(){
$("p").slideUp();
});
// Slide down hidden paragraphs
$(".down-btn").click(function(){
$("p").slideDown();
});
});
</script>Giống như các phương thức hiệu ứng jQuery khác, bạn có thể tùy chọn chỉ định tham số thời lượng hoặc tốc độ cho các phương thức slideUp() e slideDown() để kiểm soát thời lượng của hoạt ảnh trang chiếu. Thời lượng có thể được chỉ định bằng cách sử dụng một trong các chuỗi trướcdefiđêm 'slow' o 'fast', hoặc tính bằng mili giây; giá trị cao hơn biểu thị hoạt ảnh chậm hơn.
<script>
$(document).ready(function(){
// Sliding up displayed paragraphs with different speeds
$(".up-btn").click(function(){
$("p.normal").slideUp();
$("p.fast").slideUp("fast");
$("p.slow").slideUp("slow");
$("p.very-fast").slideUp(50);
$("p.very-slow").slideUp(2000);
});
// Sliding down hidden paragraphs with different speeds
$(".down-btn").click(function(){
$("p.normal").slideDown();
$("p.fast").slideDown("fast");
$("p.slow").slideDown("slow");
$("p.very-fast").slideDown(50);
$("p.very-slow").slideDown(2000);
});
});
</script>Bạn cũng có thể chỉ định chức năng gọi lại để thực thi sau khi hoàn thành phương thức slideUp() o slideDown().
<script>
$(document).ready(function(){
// Display alert message after sliding up paragraphs
$(".up-btn").click(function(){
$("p").slideUp("slow", function(){
// Code to be executed
alert("The slide-up effect is completed.");
});
});
// Display alert message after sliding down paragraphs
$(".down-btn").click(function(){
$("p").slideDown("slow", function(){
// Code to be executed
alert("The slide-down effect is completed.");
});
});
});
</script>slideToggle()Phương thức jQuery slideToggle() hiển thị hoặc ẩn các phần tử đã chọn bằng cách tạo hoạt ảnh cho chiều cao của chúng để nếu phần tử được hiển thị ban đầu, phần tử đó sẽ được cuộn lên; nếu bị ẩn, nó sẽ được cuộn xuống, tức là chuyển đổi giữa các phương thức slideUp() e slideDown().
<script>
$(document).ready(function(){
// Toggles paragraphs display with sliding
$(".toggle-btn").click(function(){
$("p").slideToggle();
});
});
</script>Tương tự, bạn có thể chỉ định tham số thời gian tồn tại cho phương thức slideToggle() Đến slideUp() e slideDown().
<script>
$(document).ready(function(){
// Slide Toggles paragraphs with different speeds
$(".toggle-btn").click(function(){
$("p.normal").slideToggle();
$("p.fast").slideToggle("fast");
$("p.slow").slideToggle("slow");
$("p.very-fast").slideToggle(50);
$("p.very-slow").slideToggle(2000);
});
});
</script>Tương tự, bạn cũng có thể chỉ định hàm gọi lại cho phương thức slideToggle().
<script>
$(document).ready(function(){
// Display alert message after slide toggling paragraphs
$(".toggle-btn").click(function(){
$("p").slideToggle(1000, function(){
// Code to be executed
alert("The slide-toggle effect is completed.");
});
});
});
</script>animate()Phương thức jQuery animate() nó được sử dụng để tạo hoạt ảnh tùy chỉnh. phương pháp animate() được sử dụng để làm sinh động các thuộc tính CSS số, chẳng hạn như width, height, margin, padding, opacity, top, left vân vân. nhưng các thuộc tính phi số như color o background-color chúng không thể được làm động bằng chức năng jQuery cơ bản.
Cú pháp cơ bản của phương thức animate() nó như sau:
$(selector).animate({ properties }, duration, callback);tham số phương pháp animate() có các ý nghĩa sau:
'slow' o 'fast', hoặc tính bằng mili giây; giá trị cao hơn biểu thị hoạt ảnh chậm hơn.Dưới đây là một ví dụ đơn giản về phương pháp animate() làm động hình ảnh từ vị trí ban đầu của nó sang bên phải 300 pixel khi nhấp vào nút.
<script>
$(document).ready(function(){
$("button").click(function(){
$("img").animate({
left: 300
});
});
});
</script>Bạn cũng có thể tạo hiệu ứng đồng thời cho nhiều thuộc tính của một phần tử bằng cách sử dụng phương thức animate(). Tất cả các thuộc tính được hoạt hình cùng một lúc mà không có bất kỳ độ trễ nào.
<script>
$(document).ready(function(){
$("button").click(function(){
$(".box").animate({
width: "300px",
height: "300px",
marginLeft: "150px",
borderWidth: "10px",
opacity: 0.5
});
});
});
</script>Bạn cũng có thể tạo hiệu ứng hoạt hình cho nhiều thuộc tính của một phần tử riêng lẻ, trong một hàng đợi bằng cách sử dụng chức năng nối của jQuery.
Ví dụ sau đây cho thấy một hoạt ảnh jQuery được xếp hàng đợi hoặc được xâu chuỗi, trong đó mỗi hoạt ảnh sẽ bắt đầu sau khi hoạt ảnh trước đó trên phần tử hoàn thành. Chúng ta sẽ thấy chức năng nối trong một bài viết trong tương lai.
<script>
$(document).ready(function(){
$("button").click(function(){
$(".box")
.animate({width: "300px"})
.animate({height: "300px"})
.animate({marginLeft: "150px"})
.animate({borderWidth: "10px"})
.animate({opacity: 0.5});
});
});
</script>Nó cũng có thể defikết thúc các giá trị tương đối cho các thuộc tính hoạt ảnh. Nếu một giá trị được chỉ định với một tiền tố += o -=, giá trị mục tiêu được tính bằng cách cộng hoặc trừ số đã chỉ định khỏi giá trị hiện tại của thuộc tính.
<script>
$(document).ready(function(){
$("button").click(function(){
$(".box").animate({
top: "+=50px",
left: "+=50px",
width: "+=50px",
height: "+=50px"
});
});
});
</script>Ngoài các giá trị số, mỗi thuộc tính có thể chấp nhận chuỗi 'show', 'hide' e 'toggle'. Nó sẽ rất hữu ích trong trường hợp bạn chỉ muốn tạo hiệu ứng động cho thuộc tính từ giá trị hiện tại thành giá trị ban đầu và ngược lại.
<script>
$(document).ready(function(){
$("button").click(function(){
$(".box").animate({
width: 'toggle'
});
});
});
</script>stop()Phương thức jQuery stop() được sử dụng để dừng hoạt ảnh hoặc hiệu ứng jQuery hiện đang chạy trên các thành phần đã chọn trước khi hoàn thành.
Cú pháp cơ bản của phương thức stop() jQuery có thể được cung cấp với:
$(selector).stop(stopAll, goToEnd);Các tham số trong cú pháp trên có ý nghĩa như sau:
false, điều này có nghĩa là chỉ hoạt ảnh hiện tại sẽ bị dừng, phần còn lại của hoạt ảnh trong hàng đợi sẽ được thực hiện sau.false.Dưới đây là một ví dụ đơn giản minh họa phương pháp stop() trong hành động thực, nơi bạn có thể bắt đầu và dừng hoạt ảnh khi nhấp vào nút.
<script>
$(document).ready(function(){
// Start animation
$(".start-btn").click(function(){
$("img").animate({left: "+=150px"}, 2000);
});
// Stop running animation
$(".stop-btn").click(function(){
$("img").stop();
});
// Start animation in the opposite direction
$(".back-btn").click(function(){
$("img").animate({left: "-=150px"}, 2000);
});
// Reset to default
$(".reset-btn").click(function(){
$("img").animate({left: "0"}, "fast");
});
});
</script>Đây là một ví dụ khác của phương pháp này nếu bạn nhấp lại vào nútSlide Toggle” sau khi bắt đầu hoạt ảnh nhưng trước khi hoàn thành, hoạt ảnh sẽ ngay lập tức bắt đầu theo hướng ngược lại với điểm bắt đầu đã lưu.
<script>
$(document).ready(function(){
// Kill and toggle the current sliding animation
$(".toggle-btn").on("click", function(){
$(".box").stop().slideToggle(1000);
});
});
</script>Khi tạo hiệu ứng di chuột hoạt hình, một trong những vấn đề phổ biến nhất mà bạn có thể gặp phải là nhiều hoạt ảnh xếp hàng khi bạn nhanh chóng đặt và xóa con trỏ chuột. Tại sao, trong tình huống này, mouseenter các mouseleave các sự kiện được kích hoạt nhanh chóng trước khi hoạt ảnh hoàn thành. Để tránh sự cố này và tạo hiệu ứng di chuột đẹp và mượt mà, bạn có thể thêm stop(true, true)vào chuỗi phương thức, như vậy:
<script>
$(document).ready(function(){
$(".box").hover(function(){
$(this).find("img").stop(true, true).fadeOut();
}, function(){
$(this).find("img").stop(true, true).fadeIn();
});
});
</script>Các câu lệnh JavaScript được thực thi từng dòng một. Tuy nhiên, do hiệu ứng jQuery mất một thời gian để hoàn thành, mã của dòng tiếp theo có thể chạy trong khi hiệu ứng trước đó vẫn đang chạy. Để ngăn điều này xảy ra, jQuery cung cấp chức năng gọi lại cho từng phương thức hiệu ứng.
Hàm gọi lại là một hàm chạy sau khi hiệu ứng hoàn tất. Hàm gọi lại được truyền dưới dạng đối số cho các phương thức của hiệu ứng và chúng thường xuất hiện dưới dạng đối số phương thức cuối cùng. Ví dụ, cú pháp cơ bản của phương thức hiệu ứng jQuery slideToggle() với chức năng gọi lại có thể được chỉ định như sau:
$(selector).slideToggle(duration, callback);Hãy xem xét ví dụ sau nơi chúng tôi đã đặt các báo cáo slideToggle()e alert()cái này bên cạnh cái kia. Nếu bạn thử mã này, cảnh báo sẽ xuất hiện ngay lập tức sau khi nhấp vào nút chuyển đổi mà không cần đợi hiệu ứng chuyển đổi slide hoàn tất.
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").slideToggle("slow");
alert("The slide toggle effect has completed.");
});
});
</script>Và đây là phiên bản sửa đổi của ví dụ trước, nơi chúng tôi đã chèn câu lệnh alert() bên trong hàm gọi lại cho phương thức slideToggle(). Nếu bạn thử mã này, thông báo cảnh báo sẽ xuất hiện sau khi hoàn thành hiệu ứng chuyển đổi trang trình bày.
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").slideToggle("slow", function(){
// Code to be executed once effect is complete
alert("The slide toggle effect has completed.");
});
});
});
</script>Tương tự như vậy, bạn có thể defikết thúc các hàm gọi lại cho các phương thức hiệu ứng jQuery khác, chẳng hạn như show(), hide(), fadeIn(), fadeOut(), animate(), Vân vân.
<script>
$(document).ready(function(){
$("button").click(function(){
$("h1, p").slideToggle("slow", function(){
// Code to be executed once effect is complete
alert("The slide toggle effect has completed.");
});
});
});
</script>Nếu thử mã mẫu ở trên, bạn sẽ nhận được cùng một thông báo cảnh báo hai lần một lần cho mỗi mặt hàng <h1> e <p>, sau khi nhấp vào nút kích hoạt.
BlogInnovazione.it
Một ca phẫu thuật tạo hình mắt bằng cách sử dụng trình xem thương mại Apple Vision Pro đã được thực hiện tại Phòng khám đa khoa Catania…
Phát triển kỹ năng vận động tinh thông qua tô màu giúp trẻ chuẩn bị cho những kỹ năng phức tạp hơn như viết. Để tô màu…
Ngành hải quân là một cường quốc kinh tế toàn cầu thực sự, đang hướng tới thị trường 150 tỷ...
Thứ Hai tuần trước, Financial Times đã công bố một thỏa thuận với OpenAI. FT cấp phép cho hoạt động báo chí đẳng cấp thế giới…