Bài đăng này sẽ giải thích cách triển khai thực tế phương thức fadeOut() của jQuery để tạo hiệu ứng làm mờ mượt mà.
Làm cách nào để tạo hiệu ứng làm mờ mượt mà bằng phương pháp fadeOut() của jQuery?
“ của jQuery mờ dần() Phương thức ” ẩn phần tử được chọn dần dần bằng cách giảm độ mờ của nó. Phương thức này thay đổi trạng thái của phần tử được chọn từ hiển thị sang ẩn. Phần tử ẩn không hiển thị trên trang web cho đến khi người dùng hiển thị lại bằng cách sử dụng nút “ mờ dần() ' phương pháp.
Cú pháp
$ ( bộ chọn ) . mờ dần ( tốc độ, nới lỏng, gọi lại ) ;
Cú pháp trên hỗ trợ các tham số tùy chọn sau để tùy chỉnh hiệu ứng làm mờ:
- tốc độ: Nó chỉ định tốc độ hiệu ứng mờ dần tính bằng mili giây. Theo mặc định, giá trị của nó là “400ms”. Hơn nữa, nó còn hỗ trợ hai giá trị tích hợp là “chậm” và “nhanh”.
- nới lỏng: Nó hiển thị tốc độ hoạt ảnh mờ dần ở các điểm khác nhau. Theo mặc định, giá trị của nó là “swing (chậm hơn ở đầu/cuối và chậm ở giữa)”. Ngoài ra, nó cũng hoạt động trên “tuyến tính (tốc độ không đổi trong hoạt ảnh mờ dần)”.
- gọi lại: Nó xác định một hàm do người dùng xác định sẽ thực thi sau khi hoàn thành hoạt ảnh mờ dần để thực hiện tác vụ đã xác định.
Hãy sử dụng phương pháp được xác định ở trên một cách thực tế.
Mã HTML
Trước khi chuyển sang phương thức “fadeOut()”, hãy xem đoạn mã HTML sau để tạo phần tử “div” mẫu mà hiệu ứng mờ dần sẽ được thực hiện trên đó:
< cái nút > mờ dần ( Trốn Yếu tố ) cái nút >< anh >< anh >< id id = 'myDiv' phong cách = 'chiều cao: 80px; chiều rộng: 300px;đường viền: 2px màu đen; lề: tự động; căn chỉnh văn bản: giữa' >
< h2 > Chào mừng đến với Linuxhint h2 >
div >
Trong các dòng mã trên:
- Các '
Thẻ ” thêm phần tử nút. - Các ' Thẻ ” tạo phần tử div có id “myDiv” và được tạo kiểu với sự trợ giúp của các thuộc tính tạo kiểu sau (chiều cao, chiều rộng, đường viền, lề, căn chỉnh văn bản).
- Bên trong div, “ Thẻ ” chỉ định phần tử tiêu đề phụ đầu tiên của cấp 2.
Bây giờ, hãy bắt đầu với ví dụ đầu tiên.
Ví dụ 1: Tạo hiệu ứng Fade-Out mượt mà với giá trị mặc định fadeOut()
Ví dụ đầu tiên ẩn phần tử div phù hợp bằng cách sử dụng phương thức “fadeOut()” với giá trị mặc định là “400ms”:
< kịch bản >
$ ( tài liệu ) . sẵn sàng ( chức năng ( ) {
$ ( 'cái nút' ) . nhấp chuột ( chức năng ( ) {
$ ( '#myDiv' ) . mờ dần ( ) ;
} ) ;
} ) ;
kịch bản >Trong các dòng mã trên:
- Thứ nhất, “ sẵn sàng() ” Phương thức này thực thi các hàm đã cho khi tài liệu HTML/DOM hiện tại được tải.
- Tiếp theo, “ nhấp chuột() Phương thức ” thực thi chức năng được liên kết khi nhấp vào nút khi bộ chọn “nút” liên quan của nó được nhấp vào.
- Sau đó, “ mờ dần() Phương thức ” ẩn phần tử div được truy cập có id là “myDiv” trong 400ms, tức là giá trị mặc định.
đầu ra
Người ta quan sát thấy rằng lần nhấp vào nút nhất định sẽ làm mờ phần tử div dần dần trong “400 mili giây”.
Ví dụ 2: Tạo hiệu ứng Fade-Out mượt mà với tham số “speed” fadeOut()
Ví dụ này sử dụng phương thức “fadeOut()” với các giá trị tích hợp (chậm/nhanh) của tham số “speed”:
< kịch bản >
$ ( tài liệu ) . sẵn sàng ( chức năng ( ) {
$ ( 'cái nút' ) . nhấp chuột ( chức năng ( ) {
$ ( '#myDiv' ) . mờ dần ( 'chậm' ) ;
} ) ;
} ) ;
kịch bản >Bây giờ, “ mờ dần() ” phương thức vượt qua “ chậm ” làm tham số của nó để tạo hiệu ứng mờ dần một cách mượt mà, tức là thay đổi trạng thái phần tử div đã chọn từ hiển thị sang ẩn.
đầu ra
Có thể thấy phần tử div được chọn sẽ ẩn chậm khi nhấp vào nút.
Ví dụ 3: Tạo hiệu ứng Fade-Out mượt mà với tham số “duration” fadeOut()
Ví dụ này áp dụng phương thức “fadeOut()” với tham số thời lượng là số mili giây cụ thể:
< kịch bản >
$ ( tài liệu ) . sẵn sàng ( chức năng ( ) {
$ ( 'cái nút' ) . nhấp chuột ( chức năng ( ) {
$ ( '#myDiv' ) . mờ dần ( 6000 ) ;
} ) ;
} ) ;
kịch bản >Bây giờ, phương thức “fadeOut()” sử dụng số mili giây được chỉ định để ẩn phần tử phù hợp trong khoảng thời gian nhất định.
đầu ra
Đầu ra ở trên ẩn các thay đổi của phần tử div đã cho khi nhấp vào nút trong một khoảng thời gian nhất định.
Ví dụ 4: Tạo hiệu ứng Fade-Out mượt mà với hàm “gọi lại” fadeOut()
Ví dụ này thực thi hàm gọi lại sau khi hoàn thành hiệu ứng mờ dần thông qua phương thức “fadeOut()”:
< kịch bản >
$ ( tài liệu ) . sẵn sàng ( chức năng ( ) {
$ ( 'cái nút' ) . nhấp chuột ( chức năng ( ) {
$ ( '#myDiv' ) . mờ dần ( 4000 , chức năng ( ) {
bảng điều khiển. nhật ký ( 'Phần tử div đã cho được ẩn thành công!' )
} ) ;
} ) ;
} ) ;
kịch bản >Trong khối mã đã nêu:
- Các ' mờ dần() ” làm mờ phần tử div phù hợp trong một khoảng thời gian cụ thể là mili giây và sau đó thực thi chức năng “gọi lại” được cung cấp.
- Bên trong “ gọi lại ” chức năng, “ console.log() ” được áp dụng để hiển thị câu lệnh đã chỉ định sau khi hoàn thành hiệu ứng “làm mờ dần”.
đầu ra
Người ta thấy rằng “console” hiển thị một câu lệnh được xác định trong hàm gọi lại sau khi ẩn phần tử div đã cho.
Ví dụ 5: Tạo hiệu ứng Fade-Out mượt mà với tham số “easing” fadeOut()
Ví dụ này áp dụng phương thức “fadeOut()” với các giá trị có thể có của tham số “easing”:
< kịch bản >
$ ( tài liệu ) . sẵn sàng ( chức năng ( ) {
$ ( 'cái nút' ) . nhấp chuột ( chức năng ( ) {
$ ( '#myDiv' ) . mờ dần ( 4000 , 'tuyến tính' ) ;
} ) ;
} ) ;
kịch bản >Bây giờ, “ mờ dần() ” thực hiện hiệu ứng mờ dần trong một khoảng thời gian cụ thể tính bằng mili giây với tốc độ không đổi do “ tuyến tính ' giá trị.
đầu ra
Đầu ra thay đổi trạng thái phần tử đã cho từ hiển thị sang ẩn với tốc độ không đổi. Vậy là xong việc thực hiện hiệu ứng “làm mờ dần” trên phần tử.
Phần kết luận
Để tạo hiệu ứng làm mờ mượt mà bằng cách sử dụng “ mờ dần() ”, người dùng không yêu cầu bất kỳ tham số bổ sung nào. Phương pháp này mờ dần tức là ẩn phần tử dần dần bằng cách thay đổi độ mờ của nó. Nếu người dùng cần thực hiện hiệu ứng mờ dần trong một khoảng thời gian cụ thể không tính bằng mili giây, hãy thực hiện chức năng gọi lại, sau đó sử dụng các tham số “tốc độ”, “nới lỏng” và “gọi lại” bằng phương thức “fadeOut()”. Bài đăng này đã giải thích một cách thực tế phương thức fadeOut() của jQuery để tạo hiệu ứng làm mờ mượt mà.