Thứ Năm, 4 tháng 4, 2013

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ẻ <a> 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

0 nhận xét:

Đăng nhận xét