Bài đăng này nêu bật những khác biệt chính giữa Hide() và fadeOut(), show() và fadeIn() trong jQuery.
Trước khi chuyển sang sự khác biệt giữa Hide() và fadeOut(), show() và fadeIn() trong jQuery, trước tiên hãy xem những kiến thức cơ bản về các phương pháp này bằng cách đọc các hướng dẫn sau:
- Phương thức fadeIn() của jQuery
- Phương thức fadeOut() của jQuery
- Phương thức ẩn() của JavaScript JQuery | Giải thích
- Phương thức JQuery Show() | Giải thích
Đầu tiên, hãy xem sự khác biệt giữa các phương thức Hide() và fadeOut() trong jQuery.
Phân biệt ẩn() và fadeOut() trong jQuery
Sự khác biệt chính duy nhất giữa “ trốn() ' Và ' mờ dần() ” phương pháp là:
- Khoảng thời gian : Các ' trốn() Phương thức ” theo mặc định sẽ ẩn phần tử bằng cách thay đổi độ mờ của nó từ 100 thành 0 ngay lập tức mà không tốn bất kỳ khoảng thời gian nào, trong khi phương thức “ mờ dần() Phương thức ” mờ dần, tức là ẩn phần tử dần dần trong “400ms”, đây là giá trị mặc định của nó.
Hãy xem cách thực hiện thực tế của sự khác biệt đã nêu.
Đầu tiên hãy xem đoạn mã HTML sau:
< trung tâm >< mã h2 = 'H2' > Chào mừng đến với Linuxhint ! h2 >
< cái nút > Ẩn phần tử cái nút >
trung tâm >
Trong các dòng mã trên:
- Các '
Thẻ ” điều chỉnh sự căn chỉnh của các thành phần nhất định ở giữa trang web. - Các ' Thẻ ” tạo tiêu đề phụ cấp 2 với id “H2”.
- Các '
Thẻ ” chèn một nút mới.
Ghi chú: Mã HTML ở trên được tuân theo trong suốt hướng dẫn này.
Ví dụ: Áp dụng phương thức “hide()” của jQuery với giá trị “Mặc định”
Ví dụ này áp dụng “hide()” với các giá trị mặc định của nó để ẩn một phần tử:
< 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 ( ) {
$ ( '#H2' ) . trốn ( ) ;
} ) ;
} ) ;
kịch bản >
Trong các dòng mã trên:
- Thứ nhất, “ sẵn sàng() ” được áp dụng để thực thi các chức năng đã chỉ định khi tải tài liệu HTML hiện tại.
- Tiếp theo, “ nhấp chuột() ” Phương thức chịu trách nhiệm thực hiện chức năng được liên kết khi nhấp vào nút.
- Sau đó, “ trốn() Phương thức ” ẩn phần tử tiêu đề được truy cập ngay lập tức có id là “H2”.
đầu ra
Có thể thấy phần tử tiêu đề ẩn ngay khi nhấn nút.
Ví dụ: Áp dụng phương thức jQuery “fadeOut()” với giá trị “Mặc định”
Ví dụ này sử dụng phương thức “fadeOut()” với các giá trị mặc định để ẩn dần phần tử đã cho trong “400ms”.
Trong trường hợp này, nội dung của phần tử “nút” bị thay đổi:
< cái nút > mờ dần ( Trốn Yếu tố ) cái nút >Bây giờ hãy triển khai phương thức “fadeOut()” theo cách này:
< 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 ( ) {
$ ( '#H2' ) . mờ dần ( ) ;
} ) ;
} ) ;
kịch bản >
Vào thời điểm này, “ mờ dần() ” được áp dụng để làm mờ phần tử tiêu đề được truy cập với 400ms, tức là giá trị mặc định.
đầu ra
Đầu ra hiển thị rõ ràng rằng lần nhấp vào nút đã cho sẽ ẩn dần phần tử tiêu đề trong khoảng thời gian mặc định, tức là “400 mili giây”.
Phân biệt show() và fadeIn() trong jQuery
Tương tự như các phương thức “hide()” và “fadeOut()”, điểm khác biệt tương tự giữa phương thức “show()” và “fadeIn()”:
- Khoảng thời gian : Các ' trình diễn() Phương thức ” theo mặc định hiển thị phần tử ẩn bằng cách thay đổi độ mờ của nó từ 0 thành 100 ngay lập tức, trong khi phương thức “ mờ dần() Phương thức ” hiển thị phần tử ẩn dần dần trong “400ms” là giá trị mặc định của nó.
Ví dụ: Áp dụng phương thức “show()” của jQuery với giá trị “Mặc định”
Ví dụ này áp dụng “show()” với các giá trị mặc định để hiển thị phần tử ẩn.
Trước tiên hãy xem khối mã HTML được cung cấp:
< trung tâm >< cái nút > Hiển thị phần tử cái nút >
< mã h2 = 'H2' phong cách = 'không trưng bày' > Chào mừng đến với Linuxhint ! h2 >
trung tâm >
Theo kịch bản này, phần tử tiêu đề đã cho bị ẩn với sự trợ giúp của “ không trưng bày ' tài sản.
Bây giờ, hãy làm theo khối mã đã cho để hiểu cách triển khai thực tế của phương thức “show()”:
< 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 ( ) {
$ ( '#H2' ) . trình diễn ( ) ;
} ) ;
} ) ;
kịch bản >
Khối mã trên sử dụng “ trình diễn() ” để hiển thị phần tử ẩn được thêm vào ngay lập tức.
đầu ra
Có thể thấy khi nhấn nút sẽ hiển thị ngay phần tử tiêu đề bị ẩn.
Ví dụ: Áp dụng phương thức jQuery “fadeIn()” với giá trị “Mặc định”
Ví dụ này hiển thị phần tử ẩn bằng phương thức “fadeIn()” với giá trị mặc định “ 400 mili giây ”:
Văn bản của thành phần nút được thay đổi theo kịch bản đã cho:
< cái nút > mờ dầnTrong ( Trình diễn Yếu tố ) cái nút >Bây giờ, hãy áp dụng “ mờ dần() ” phương thức sử dụng khối mã sau:
< 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 ( ) {
$ ( '#H2' ) . mờ dầnTrong ( ) ;
} ) ;
} ) ;
kịch bản >
Trong khối mã này, “ mờ dần() Phương thức ” được sử dụng để hiển thị phần tử ẩn được khớp với id “H2” trong 400ms, tức là giá trị mặc định.
đầu ra
Có thể thấy rằng lần nhấp vào nút nhất định sẽ hiển thị dần dần phần tử bị ẩn trong khoảng thời gian mặc định, tức là “400ms”.
Phần kết luận
Trong jQuery, điểm khác biệt chính duy nhất giữa trốn() Và mờ dần() , trình diễn() , Và mờ dần() phương pháp là “ Khoảng thời gian ”. Theo mặc định, phương thức “show()” và “hide()” thực hiện các chức năng của chúng ngay lập tức, trong khi phương thức “fadeIn()” và “fadeOut()” thực hiện các nhiệm vụ của chúng trong khoảng thời gian mặc định, tức là “400 mili giây”. Bài đăng này đã giải thích một cách thực tế những điểm khác biệt chính giữa Hide() và fadeOut(), show() và fadeIn() trong jQuery.