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:

$(function() {
	$('a#hidebox').click(function() {
		$('#box').css('background','#CCCCCC')
	});
});

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

$(function() {
	$('a#hidebox').click(function() {
		$('#box').css({
        	'background':'#00FF00',
            'width':'500px',
            'height':'300px'
        });
	});
});

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

$(function() {
	$('a#hide').click(function() {
		$('#box').hide(); //Ẩn #box khi click vào thẻ a có id là hide
	});
    
    $('a#show').click(function() {
		$('#box').show(); // Hiện #box khi click vào thẻ a có id là show
	}); 
});

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).

$(function() {
	$('a#fadeout').click(function() {
		$('#box').fadeOut();
	});
	
	$('a#fadein').click(function() {
		$('#box').fadeIn();
	});
    
	$('a#slidedown').click(function() {
		$('#box').slideDown();
	});
	
	$('a#slideup').click(function() {
		$('#box').slideUp();
	});
});

Bạn cũng có thể đặt thời gian cho fade và slide tương tự như hide/show. Nếu bạn chưa rõ, hãy xem qua ví dụ