#Hiệu ứng và tốc độ
Khi ta thêm tốc độ, hay nói chính xác hơn là khoảng thời gian, vào phương thức .show() hoặc .hide(), nó sẽ trở thành hiệu ứng động xảy ra trong một khoảng thời gian định trước. Ví dụ như phương thức .hide() làm giảm chiều cao, độ rộng và tính trong suốt của một phần tử cùng một lúc cho đến khi cả ba giá trị đều bằng không. Đến lúc đó thuộc tính của CSS là display: none sẽ được áp dụng. Mặt khác, phương thức .show() thì tăng chiều cao của một phần tử từ trên xuống dưới, chiều rộng từ trái qua phải và độ trong suốt từ 0 đến 1 cho đến khi phần tử đó hoàn toàn có thể được nhìn thấy.
#Tốc độ
Với hiệu ứng jQuery, chúng ta có thể sử dụng ba tốc độ có sẵn là: ‘slow’, ‘normal’ và ‘fast’. Sử dụng .show(‘slow’) sẽ làm cho hiệu ứng Show diễn ra trong 0.6 giây, .show(‘normal’) trong vòng 0.4 giây và .show(‘fast’) là 0.2 giây. Nếu bạn muốn chính xác hơn nữa, bạn có thể sử dụng millisecond như: .show(850). Không giống như dạng chữ, khi dùng millisecond, số không cần phải bỏ trong dấu nháy.
Quay lại ví dụ ở trên, bây giờ chúng ta sẽ thêm tốc độ vào xem nó như thế nào.
$(document).ready(function() {
$('p:eq(1)').hide();
$('a.more').click(function() {
$('p:eq(1)').show('slow');
$(this).hide();
return false;
});
});
Xem Demo online – Example 5
#Fade in và Fade out
Hai phương thức .show() và .hide() cũng đã đủ ‘độ mướt’ rồi, nhưng có đôi khi bạn lại thấy ‘mướt’ quá cũng không tốt. Cho nên jQuery cho chúng ta một số những hiệu ứng động có sẵn khác để thêm phần linh hoạt. Ví dụ khi bạn muốn cả đoạn văn xuất hiện từ từ bằng cách tăng dần độ trong suốt của nó, chúng ta có thể sử dụng .fadeIn(‘slow’):
$(document).ready(function() {
$('p:eq(1)').hide();
$('a.more').click(function() {
$('p:eq(1)').fadeIn('slow');
$(this).hide();
return false;
});
});
Nếu muốn bạn cũng có thể thử với .fadeOut(‘slow’) xem công dụng của nó như thế nào.
#Hiệu ứng đa hợp
Đôi khi chúng ta muốn đảo trạng thái ẩn hiện một thành phần nào đó thay vì chỉ hiển thị nó một lần như chúng ta đã làm ở các bước trên. Đảo trạng thái có thể làm được bằng cách kiểm tra độ nhìn thấy của một tập hợp các thành phần trước, sau đó thì gán một phương thức phù hợp cho nó. Sử dụng lại hiệu ứng fade, chúng ta có thể sửa lại mã như sau:
$(document).ready(function() {
var $firstPara = $('p:eq(1)');
$firstPara.hide();
$('a.more').click(function() {
if ($firstPara.is(':hidden')) {
$firstPara.fadeIn('slow');
$(this).text('read less');
} else {
$firstPara.fadeOut('slow');
$(this).text('read more');
}
return false;
});
});
Như chúng ta từng làm ở trên, chúng ta lưu selector vào một biến, trong ví dụ này là $firstPara = $(‘p:eq(1)’), để tránh phải lập lại việc lên xuống cây DOM. Chúng ta cũng không còn ẩn đi đường liên kết mà thay đổi chữ của nó.
Sử dụng mệnh đề if … else là hoàn toàn hợp lý để đảo trạng thái ẩn hiện của một phần tử. Nhưng với hiệu ứng đa hợp của jQuery, chúng ta không cần phải sử dụng dạng điều kiện này nữa. Jquery có một phương thức là .toggle(), hoạt động giống như .show() và .hide(), nó cũng có thể nhận hoặc không nhận tham số tốc độ. Một phương thức đa hợp nữa là .slideToggle(), nó được sử dụng để ẩn hoặc hiện một phần tử bằng cách từ từ tăng hoặc giảm độ cao của nó. Đoạn mã dưới đây chúng ta sẽ sử dụng phương thức .slideToggle().
$(document).ready(function() {
var $firstPara = $('p:eq(1)');
$firstPara.hide();
$('a.more').click(function() {
$firstPara.slideToggle('slow');
var $link = $(this);
if ( $link.text() == "read more" ) {
$link.text('read less');
} else {
$link.text('read more');
}
return false;
});
});
Lần này từ khoá $(this) được dùng nhiều lần, cho nên chúng ta lưu nó lại vào một biến $link để đoạn mã hoạt động hiệu quả hơn và cũng dễ đọc hơn. Hơn nữa, mệnh đề điều kiện chỉ kiểm tra nội dung chữ của đường liên kết thay vì xem xem đoạn văn thứ 2 có hiện hay không. Bởi vì chúng ta chỉ sử dụng mệnh đề này để thay đổi chữ của nó.
#Tự tạo hiệu ứng động
Ngoài những phương thức có sẵn, jQuery cung cấp thêm một phương thức rất mạnh nữa là .animate(). Nó cho phép chúng ta tự tạo ra những hiệu ứng động theo ý thích của mình. Phương thức .animate() có hai dạng. Dạng thứ nhất có thể nhận bốn đối số.
- 1.Cặp thuộc tính và giá trị – giống như .css() mà chúng ta đã thảo luận ở trên.
- 2.Tốc độ tuỳ chọn – có thể là một trong những tốc độ có sẵn hoặc một số dưới dạng millisecond.
- 3.Kiểu di chuyển – sẽ được bàn kỹ hơn ở chương sau
- 4.Một hàm gọi ngược sẽ được bàn ở phần dưới.
Kết hợp lại thì bốn đối số trên sẽ có dạng công thức chung như sau
.animate({property1: 'value1', property2: 'value2'},
speed, easing, function() {
alert('đã tiến hành xong');
});
Dạng thứ hai lấy vào 2 đối số, thuộc tính và tuỳ chọn.
.animate({properties}, {options})
Khi chúng ta xuống dòng để dễ đọc hơn thì dạng thứ 2 nhìn như sau:
.animate({
property1: 'value1',
property2: 'value2'
}, {
duration: 'value',
easing: 'value',
complete: function() {
alert('The animation is finished.');
},
queue: boolean,
step: callback
});
Trước hết chúng ta sẽ sử dụng dạng thứ nhất của .animate(), sau đó chúng ta sẽ sử dụng dạng thứ 2 ở phần sau của chương này khi chúng ta bàn tới xếp hàng hiệu ứng.
#Đảo trạng thái Fade
Khi chúng ta nói về hiệu ứng đa hợp, bạn có thấy rằng không phải phương thức nào cũng có những phương thức đảo trạng thái đi kèm. Ví dụ phương thức .slide() thì có .slideToggle(), nhưng không có .fadeToggle() cho .fadeIn() và .fadeOut(). Nhưng chúng ta có thể dễ dàng sử dụng phương thức .animate() để tạo ra hiệu ứng đảo trạng thái fade. Ở đoạn mã dưới đây, chúng ta sẽ thay thế phương thức .slideToggle() với hiệu ứng động tự tạo.
$(document).ready(function() {
$('p:eq(1)').hide();
$('a.more').click(function() {
$('p:eq(1)').animate({opacity: 'toggle'}, 'slow');
var $link = $(this);
if ( $link.text() == "read more" ) {
$link.text('read less');
} else {
$link.text('read more');
}
return false;
});
});
Xem ví dụ bạn sẽ thấy, phương thức .animate() cũng cho phép sử dụng những từ khoá như ‘show’, ‘hide’ và ‘toggle’. Khi mà những phương thức rút gọn khác không phù hợp với tác vụ.
#Hiệu ứng động đa thuộc tính
Với phương thức .animate(), chúng ta có thể cùng một lúc sửa đổi bất cứ sự kết hợp nào của các thuộc tính. Ví dụ khi bạn muốn cùng một lúc tạo ra hai hiệu ứng trượt và mờ đi khi đảo trạng thái của đoạn văn thứ 2, chúng ta chỉ việc thêm cặp thuộc tính – giá trị chiều cao vào bản đồ thuộc tính .animate().
$(document).ready(function() {
$('p:eq(1)').hide();
$('a.more').click(function() {
$('p:eq(1)').animate({
opacity: 'toggle',
height: 'toggle'
},
'slow');
var $link = $(this);
if ( $link.text() == "read more" ) {
$link.text('read less');
} else {
$link.text('read more');
}
return false;
});
});
Hơn nữa, chúng ta không chỉ có những thuộc tính định dạng để sử dụng cho những phương thức rút gọn mà chúng ta còn có những thuộc tính khác như: left, top, fontSize, margin, padding và borderWidth. Hãy nhớ lại đoạn mã thay đổi kích thước chữ của đoạn văn ở trên. Chúng ta có thể tăng hoặc giảm kích thước bằng cách dùng .animate() thay cho .css().
$(document).ready(function() {
var $speech = $('div.speech');
var defaultSize = $speech.css('fontSize');
$('#switcher button').click(function() {
var num = parseFloat( $speech.css('fontSize'), 10 );
switch (this.id) {
case 'switcher-large':
num *= 1.4;
break;
case 'switcher-small':
num /= 1.4;
break;
default:
num = parseFloat(defaultSize, 10);
}
$speech.animate({fontSize: num + 'px'},
'slow');
});
});
Những thuộc tính vừa nêu ở trên còn cho phép chúng ta tạo ra nhiều hiệu ứng phức tạp khác. Ví dụ chúng ta có thể di chuyển một thành phần từ trái sang phải của trang web và cùng một lúc tăng chiều cao của nó lên 20px và thay đổi độ dày của border lên thành 5px. Chúng ta sẽ thực nghiệm với thẻ <div id=’switcher’>.
Với những giao diện co giãn, chúng ta phải tính toán được khoảng cách mà hộp div sẽ di chuyển trước khi nó chạm vào đường biên bên phải của trang.Giả sử rằng độ rộng của đoạn văn bản là 100%, chúng ta có thể lấy độ rộng của đoạn văn bản trừ đi độ rộng của hộp Cỡ Chữ. Jquery có một phương thức là .width() có thể sử dụng được trong trường hợp này, tuy nhiên nó lại không tính được padding trái phải hoặc độ rộng đường viền. Với jQuery phiên bản 1.2.6, chúng ta có thêm phương thức .outerWidth(). Đây chính là phương thức chúng ta sẽ sử dụng để tránh phải tính thêm vào padding và border. Trong ví dụ này chúng ta sẽ bắt đầu hiệu ứng động khi mà người dùng nhấp chuột vào từ Cỡ Chữ, ở ngay phía trên hàng nút. Đoạn mã sẽ tương tự như sau
$(document).ready(function() {
$('div.label').click(function() {
var paraWidth = $('div.speech p').outerWidth();
var $switcher = $(this).parent();
var switcherWidth = $switcher.outerWidth();
$switcher.animate({left: paraWidth - switcherWidth,
height: '+=20px', borderWidth: '5px'}, 'slow');
});
});
Bạn nên chú ý đến thuộc tính height có dấu += trước giá trị pixel. Nó có nghĩa là giá trị tương đối. Nên thay vì nó làm cho hộp biến thành 20px, nó sẽ làm cho hộp to ra 20 px lớn hơn so với kích thước hiện tại.
Mặc dù đoạn mã trên làm cho thẻ div cao lên và border dày lên, nhưng nó không di chuyển sang bên tay phải như chúng ta muốn. Chúng ta phải thay đổi thuộc tính position của nó trong CSS.
#Định vị trí với CSS
Khi bạn làm việc với .animate(), bạn nên nhớ đến tầm ảnh hưởng của CSS lên các thành phần chúng ta muốn sửa đổi. Ví dụ khi bạn điều chỉnh thuộc tính left như trên, nó sẽ không tạo ra thay đổi gì với các phần tử đó trừ khi những phần tử bạn muốn thay đổi có thuộc tính position là relative hoặc absolute trong CSS. Vị trí mặc định của CSS cho những thành phần Block-level là static, có nghĩa là tĩnh, điều đó nói lên lý do tại sao nó vẫn giữ nguyên vị trí khi bạn cố gắng di chuyển nó. Do vậy nếu bạn muốn nó được thay đổi, bạn phải sửa lại giá trị position của nó trong CSS.
#switcher {
position: relative;
}
Sau khi đã thay đổi thuộc tính position trong CSS, hộp nút của chúng ta đã di chuyển sang bên tay phải như hình
Xem Demo online – Example 6
#Hiệu ứng đồng bộ và theo thứ tự
Phương thức .animate() như chúng ta đã biết được sử dụng để tạo ra hiệu ứng đồng bộ cho một tập hợp các phần tử. Nhưng cũng có lúc chúng ta lại muốn các hiệu ứng xảy ra theo thứ tự hết cái này rồi mới đến cái kia.
