Hiệu ứng ẩn hiện mờ dần bằng các phương thức Fade trong jQuery

views

A+A-

PrintEmail

Làm thế nào để tạo ra hiệu ứng ẩn hiện mờ dần, cùng đọc bài viết sau để tìm hiểu cách thực hiện hiệu ứng bằng jQuery và phân biệt các phương thức fadeIn() fadeOut() fadeToggle() fadeTo() xem chúng như thế nào nhé

Các bạn đang xem bài viết thuộc bài học về jQuery Effects - hiệu ứng jQuery

Hiệu ứng ẩn hiện trong jQuery

Ở một trong những bài viết trước, LaiXe.Xyz đã giới thiệu đến các bạn hiệu ứng ẩn hiện đơn giản với các phương thức hide() show() toggle()
Hôm nay chúng ta sẽ tiếp tục học về hiệu ứng ẩn hiện bằng jQuery, nhưng là ẩn hiện mờ dần (gọi là fade effect), qua các phương thức mà chúng ta sẽ lần lượt tìm hiểu trong bài viết này nhé:

• fadeOut()
• fadeIn()
• fadeToggle()
• fadeTo()

Hãy cùng học jQuery Online tại LaiXe.Xyz thông qua những bài viết và những ví dụ cụ thể nhé

jQuery fadeOut() Method

Click để ẩn dần nội dung dưới đây

Phương thức fadeOut() tạo ra hiệu ứng ẩn mờ dần trong jQuery
LaiXe.Xyz là website cung cấp những bài học jQuery từ cơ bản đến nâng cao

Phương thức fadeOut() trong jQuery tạo ra hiệu ứng ẩn mờ dần cho phần tử được chọn.

Syntax

Phương thức fadeOut() trong jQuery có cú pháp

$(selector).fadeOut(speed,easing,callback)

Tham số / Parameter	Mô tả
selector	Đây là bộ chọn jQuery để xác định phần tử hoặc những phần tử được chọn
speed	Không bắt buộc. Dùng để chỉ định tốc độ của hiệu ứng mờ dần. (Giá trị mặc định là 400 milliseconds) Giá trị có thể được sử dụng: milliseconds (nếu 1 giây thì bạn sẽ ghi là 1000) "slow" "fast"
easing	Không bắt buộc. Dùng để chỉ định tốc độ của phần tử trong các điểm khác nhau của sự chuyển động.(Giá trị mặc định là "swing") Giá trị có thể được sử dụng: "swing" - di chuyển chậm hơn ở đầu và cuối, nhưng nhanh hơn ở giữa "linear" - di chuyển tốc độ không đổi
callback	Không bắt buộc. Dùng để thực thi một hàm sau khi phương thức fadeOut() hoàn thành. jQuery Callback sẽ được đề cập rõ hơn trong bài học sau
Lưu ý: Các tham số trên cũng giống các tham số cho các phương thức fadeIn() fadeTo() và fadeToggle() được đề cập ở dưới

Ví dụ không có tham số

Tạo hiệu ứng mờ dần cho phần tử <p>

 $("p").fadeOut();

Thử code »

Ví dụ có tham số speed

Tạo hiệu ứng mờ dần cho phần tử <p> sử dụng tham số speed là 3 giây

    $("p").fadeOut(3000);

Thử code »

Ví dụ có tham số callback

Tạo hiệu ứng mờ dần cho phần tử <p> sử dụng tham số callback

    $("p").fadeOut(1000, function(){
      alert("Phương thức fadeOut() đã hoàn thành!");
    });

Thử code »

jQuery fadeIn() Method

Click để hiện dần nội dung dưới đây

Phương thức fadeIn() tạo ra hiệu ứng hiện trong jQuery
Những ví dụ về jQuery được thể hiện đơn giản và dễ hiểu cho người mới bắt đầu

Phương thức fadeIn() trong jQuery tạo ra hiệu ứng hiển thị dần dần cho phần tử được chọn.
Mẹo: Phương thức này sẽ tạo hiệu ứng hiện dần ra đối với những phần tử bị ẩn bằng jQuery và bị ẩn bởi thuộc tính của CSS là display:none. Còn đối với những phần tử mang thuộc tính CSS (visibility:hidden) sẽ không thực hiện được với phương thức này

Syntax

Phương thức fadeIn() trong jQuery có cú pháp

$(selector).fadeIn(speed,easing,callback)

Các tham số trong cú pháp của phương thức fadeIn() cũng giống như trong phương thức fadeOut() ở trên.

Ví dụ không có tham số

Tạo hiệu ứng hiện dần cho phần tử <p>

 $("p").fadeIn();

Thử code »

Ví dụ có tham số speed

Tạo hiệu ứng hiển thị dần cho phần tử <p> sử dụng tham số speed là 3 giây

    $("p").fadeIn(3000);

Thử code »

Ví dụ có tham số callback

Tạo hiệu ứng hiện cho phần tử <p> sử dụng tham số callback

    $("p").fadeIn(1000, function(){
      alert("Phương thức fadeIn() đã hoàn thành!");
    });

Thử code »

jQuery FadeToggle() Method

Click để ẩn/hiện dần nội dung dưới đây

Phương thức fadeToggle() tạo ra sự chuyển đổi giữa fadeOut() và fadeIn() trong jQuery
Học jQuery tiếng Việt với những tài liệu và phương pháp học hiệu quả nhất

Phương thức fadeToggle() trong jQuery tạo ra hiệu ứng ẩn hiện cho phần tử được chọn, phương thức này là sự chuyển đổi giữa 2 phương thức fadeIn() và fadeOut().

Syntax

Phương thức fadeToggle() trong jQuery có cú pháp

$(selector).fadeToggle(speed,easing,callback)

Các tham số trong cú pháp của phương thức fadeToggle() cũng giống như trong phương thức fadeOut() ở trên.

Ví dụ không có tham số

Tạo hiệu ứng ẩn/ hiện mờ dần cho phần tử <p>

 $("p").fadeToggle();

Thử code »

Ví dụ có tham số speed

Tạo hiệu ứng ẩn/hiện mờ dần cho phần tử <p> sử dụng tham số speed là 1 giây

    $("p").fadeToggle(1000);

Thử code »

Ví dụ có tham số callback

Tạo hiệu ứng ẩn/hiện mờ dần cho phần tử <p> sử dụng tham số callback

    $("p").fadeToggle(1000, function(){
      alert("Phương thức fadeToggle() đã hoàn thành!");
    });

Thử code »

jQuery FadeTo() Method

Click để thay đổi độ mờ nội dung dưới đây

Phương thức fadeTo() tạo hiệu ứng thay đổi độ mờ trong jQuery (thuộc tính CSS opacity)
Tài liệu học jQuery bằng tiếng Việt luôn phong phú tại LaiXe.Xyz

Phương thức fadeTo() trong jQuery tạo ra hiệu ứng thay đổi độ mờ trong một khoảng thời gian chỉ định

Syntax

Phương thức fadeTo() trong jQuery có cú pháp

$(selector).fadeTo(speed,opacity,easing,callback)

Trong đó tham số opacity là bắt buộc dùng để chỉ định độ mờ dần, tham số này có giá trị từ 0.00 đến 1.00 cũng tương ứng với thuộc tính opacity trong CSS nhé các bạn

Ví dụ

Tạo hiệu ứng mờ dần phần từ <p>, tương ứng với thuộc tính CSS opacity:0.4

$("button").click(function(){
  $("p").fadeTo(1000, 0.4);
});

Thử code »

Ví dụ có tham số callback là một hàm kèm theo

Tạo hiệu ứng mờ dần phần từ <p>, tương ứng với thuộc tính CSS opacity:0.2, sau đó hiển thị thông báo

  $("button").click(function(){
    $("p").fadeTo(2000, 0.2, function(){
      alert("The fadeTo effect is finished!");
    });
  });

Thử code »

Chuyên Mục : Hiệu ứng ẩn hiện jQuery Hiệu ứng Fade jQuery hiệu ứng jQuery Học jQuery jQuery effect method jQuery Effects