Người Viết : ViKiMi Editor

Thực hiện trượt phần tử HTML giúp việc hiện và ẩn phần tử của Website nhiều lựa chọn
Những hiệu ứng tạo hiển thị cho phần tử HTML cỏ vẻ như được jQuery rất quan tâm và cũng như tạo những cách khác nhau để đạt được xử lý hiển thị. Vì vậy, mà nhiều hiệu ứng có vẻ rất giống nhau nhưng lại mang bản chất khác nhau hoàn về cách làm việc. Nếu chỉ đánh giá về giao diện thì khó có thể tìm được nhiều sự khác biệt.
Vậy thư viện jQuery còn mang lại cho chúng ta hiệu ứng nào mà chỉ đánh giá bên ngoài thì rất khó phát hiện được sự khác nhau.
Điều mà chúng ta nhắc đến ở đây là những hiệu ứng jQuery Effects – Sliding
Bao gồm các phương thức :
+ slideDown()
+ slideUp()
+ slideToggle()
Đây là những phương thức giúp tạo hiệu ứng hiển thị phần tử + trượt xuống; Và tạo hiệu ứng ẩn phần tử + trượt lên
Nhờ vậy, Sự trình diễn hiển thị hoặc ẩn phần tử sẽ trở nên đẹp mắt hơn. Nguyên nhân là do đã bổ sung hiệu ứng trượt lên và trượt xuống.
Có thể nói jQuery đã rất chú trọng vào hiển thị phần tử.
Cũng không nói quá rằng jQuery đã mang lại giao diện diện mạo mới
TÌM HIỂU VỀ CÁC PHƯƠNG THỨC jQuery EFFECTS – SLIDING
A ] Phương thức SlideDown()
Khi phần tử HTML đang ẩn ( display : none; ). Đây là phương thức giúp hiển thị + trượt phần tử xuống.
>> Tạo một hiệu ứng hiển thị tốt hơn.
CÚ PHÁP :
$(selector).slideDown( speed, callback );
+ Tham số speed ( tùy chọn ) : Chỉ định tốc độ của hiển thị.
Tham số này có thể nhận các giá trị “slow”, “fast” hoặc milLiseconds.
+ Tham số callback ( tùy chọn ) : Chỉ định một hàm gọi lại được thực thi sau khi hiệu ứng TRƯỢT XUỐNG hoàn thành.
Example ::
$(document).ready(function(){
$(“#flip-down”).click(function(){
$(“#panel”).slideDown(“slow”);
});
});
B ] Phương thức SlideUp()
Khi phần tử HTML đang hiển thị. Đây là phương thức giúp ẨN + trượt phần tử lên.
>> Tạo một hiệu ứng hiển thị tốt hơn.
CÚ PHÁP :
$(selector).slideUp( speed, callback );
+ Tham số speed ( tùy chọn ) : Chỉ định tốc độ của ẩn phần tử.
Tham số này có thể nhận các giá trị “slow”, “fast” hoặc milLiseconds.
+ Tham số callback ( tùy chọn ) : Chỉ định một hàm gọi lại được thực thi sau khi hiệu ứng TRƯỢT LÊN hoàn thành.
Example ::
$(document).ready(function(){
$(“#flip-up”).click(function(){
$(“#panel”).slideUp(“slow”);
});
});
C ] Phương thức SlideToggle()
Đây là phương thức Chuyển đổi / Toggle giữa phương thức SlideUp() và SlideDown()
Điều đó có nghĩa là :
+ Nếu các phần tử đã được trượt xuống, slideToggle() sẽ trượt chúng lên.
+ Nếu các phần tử đã được trượt lên, slideToggle() sẽ trượt chúng xuống.
>> Tạo một hiệu ứng hiển thị tốt hơn.
CÚ PHÁP :
$(selector).slideToggle( speed, callback );
+ Tham số speed ( tùy chọn ) : Chỉ định tốc độ của ẩn phần tử.
Tham số này có thể nhận các giá trị “slow”, “fast” hoặc milLiseconds.
+ Tham số callback ( tùy chọn ) : Chỉ định một hàm gọi lại được thực thi sau khi hiệu ứng TOGGLE hoàn thành.
Example ::
$(document).ready(function(){
$(“#flip-toggle”).click(function(){
$(“#panel”).slideToggle(“slow”);
});
});
Những hiệu ứng jQuery Effects – Sliding được cung cấp khá tốt. Cho phép tạo ra những hiển thị tốt hơn cho giao diện Website. Để tạo được một Website với giao diện hiện đại yêu cầu chắc chắn cần nhiều xử lý hiệu ứng giao diện. Vì vậy, những hiệu ứng mà jQuery mang lại hoàn toàn hữu ích. Vấn đề chính là cần phải xử lý như thế nào ?
+ jQuery Effects – Sliding là những hiệu ứng rất thiết