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
});