• .
  • Smallrig phu kien ho tro quay gan gimbal rs3 rs2 rsc2.jpg
  • Balo túi đeo PGYTECH 3L 4L 6L 10L 11L 22L 25L 35L
  • Tilta Phụ kiện các loại giá tốt nhất
  • Hỗ trợ book Xanh SM giao liền

Học jquery căn bản - Bài 2: Các phương thức Fade, slide và show

Bài này bạn sẽ học cách gắn thêm thuộc tính css cho một element, các phương thức Fade, slide và show của jQuery.

Thêm thuộc tính CSS

Sử dụng ví dụ của bài 1, nhưng khi click vào thẻ ta sẽ đổi màu của #box. Thay đổi hàm jQuery như sau:

1 $(function() {
2     $('a#hidebox').click(function() {
3         $('#box').css('background','#CCCCCC')
4     });
5 });

Để thêm nhiều hơn một thuộc tính, ta sử dụng:

1 $(function() {
2     $('a#hidebox').click(function() {
3         $('#box').css({
4             'background':'#00FF00',
5             'width':'500px',
6             'height':'300px'
7         });
8     });
9 });

Phương thức hide/show

Để ẩn/hiện một element, ta có thể dùng cách đơn giản nhất: hide/show

1 $(function() {
2     $('a#hide').click(function() {
3         $('#box').hide(); //Ẩn #box khi click vào thẻ a có id là hide
4     });
5      
6     $('a#show').click(function() {
7         $('#box').show(); // Hiện #box khi click vào thẻ a có id là show
8     });
9 });

Bạn có thể đặt thời gian cho việc ẩn/ hiện box: hide('4000') (#box sẽ ẩn từ từ trong vòng 4000ms ~ 4 giây)

Phương thức Fade và slide

Tương tự như hide/show, ta có fadeOut/fadeIn (ẩn/hiện box với hiệu ứng mờ dần), slideUp/slideDown (ẩn/hiện box với hiệu ứng kéo cửa).

01 $(function() {
02     $('a#fadeout').click(function() {
03         $('#box').fadeOut();
04     });
05      
06     $('a#fadein').click(function() {
07         $('#box').fadeIn();
08     });
09      
10     $('a#slidedown').click(function() {
11         $('#box').slideDown();
12     });
13      
14     $('a#slideup').click(function() {
15         $('#box').slideUp();
16     });
17 });

Bạn cũng có thể đặt thời gian cho fade và slide tương tự như hide/show.

Share facebookShare facebook

Tin Cùng Chuyên Mục

Trang 1 / 1

Bạn đã đọc tin này chưa ?

Go Top
Chat hỗ trợ
Chat ngay