Người Viết : ViKiMi Editor
Tạo phân tử HTML chuyển động hoạt ảnh dễ dàng với hiệu ứng jQuery Effects – Animation
Thư Viện jQuery tiếp tục cung cấp cho chúng ta một hiệu ứng thú vị khác để thiết kế giao diện. Hiệu ứng jQuery Animation cho phép chúng ta thiết kế khả năng giao diện đồ hoạ cao hơn. Hiệu ứng chuyển động Animation đem lại kết quả giống như bạn tạo ra một thước phim bằng jQuery. Có thể thấy hiệu ứng này làm nên những chuyển động liên tiếp trên phần tử HTML
Vậy điều gì khiến cho hiệu ứng này trở nên sinh động vậy?
Quả thực chúng ta sẽ thấy nó thú vị hơn khi bạn có thể tạo một thước phim mà chỉ cần jQuery. Một thức phim cơ bản khi thiết kế đồ hoạ
Hiệu ứng jQuery Animation giúp bạn có thể áp dụng rất nhiều thứ :
+ Tạo sự chú ý tới người xem
+ Tạo một thiết kế động cho Website
HIỆU ỨNG JQUERY ANIMATION
Phương thức animate() được sử dụng để tạo nên hiệu ứng động tuỳ chỉnh này
CÚ PHÁP :
$(selector).animate( { params }, speed, callback ) ;
+ Tham số params ( bắt buộc ) : Tham số này xác định các thuộc tính CSS sẽ được thay đổi động
+ Tham số speed ( tuỳ chọn ) : Tham số này xác định thời lượng của hiệu ứng. Nhận giá trị “slow”, “fast”, or milliseconds
+ Tham số callback ( tuỳ chọn ) : Chỉ định một hàm gọi lại được thực thi sau khi hiệu ứng hoàn thành.
<< Để hiểu rõ cách vận dụng hiệu ứng này, bạn hãy tham khảo những ví dụ bên dưới về nguyên lý animation làm việc >>
Example 1 :
Thực hiện di chuyển phần tử <Div> sang bên phải 300px.
Điều này có nghĩa là chúng ta phải thực hiện căn lề phần tử <Div> với giá trị CSS căn phía bên trái là 300px
$(document).ready(function(){
$(“button”).click(function(){
$(“div”).animate({left: ‘300px’});
});
});
Example 2 :
Thực hiện thao tác động trên phần tử HTML bằng nhiều thuộc tính cùng một lúc. Đây là điều cho phép tạo nên chuyển động
Di chuyển thẻ <Div> và tạo nên hiệu ứng rõ nét bằng cách thao tác nhiều thuộc tính cùng lúc
$(document).ready(function(){
$(“button”).click(function(){
$(“div”).animate({
left: ‘300px’,
opacity: ‘0.7’,
height: ‘200px’,
width: ‘200px’
});
});
});
Example 3 :
THAO TÁC DỰA VÀO VỊ TRÍ HIỆN TẠI CỦA PHẦN TỬ HTML
Để thao tác dựa trên vị trí hiện tại của phần tử HTML thì chúng ta phải sử dụng đến giá trị tương đối
Vì không phải lúc nào phần tử HTML cũng nằm ở góc cùng bên trái. Mà nó có thể nằm ở một vị trí bất kỳ. Do đó, để thao tác chính xác với vị trí hiện tại của phần tử thì phải sử dụng đến giá trị tương đối.
Thực hiện điều này bằng cách sử dụng toán tử += và -=
$(document).ready(function(){
$(“button”).click(function(){
$(“div”).animate({
right: ‘+=100px’,
height: ‘-=120px’,
width: ‘+=250px’
});
});
});
NGOÀI RA, CŨNG CÓ THỂ SỬ DỤNG Pre-defined VALUES
+ Bạn có thể sử dụng giá trị “show”, “hide”, or “toggle”
$(“button”).click(function(){
$(“div”).animate({
width: ‘toggle’
});
});
Example 4 :
SỬ DỤNG CHỨC NĂNG HÀNG ĐỢI
Thư viện jQuery cung cấp chức năng hàng đợi để tạo khả năng động khi sử dụng phương thức animate
Điều này có nghĩa là có thể gọi nhiều phương thức animate() nối tiếp
Khi đó jQuery sẽ tạo một hàng đợi “nội bộ” với những phương thức này
$(“button”).click(function(){
var div = $(“div10”);
div.animate({height: ‘200px’, opacity: ‘0.1’}, “fast”);
div.animate({width: ‘400px’, opacity: ‘0.6’}, “slow”);
div.animate({height: ‘300px’, opacity: ‘0.5’}, “fast”);
div.animate({width: ‘300px’, opacity: ‘0.75’}, “slow”);
});
LƯU Ý QUAN TRỌNG :
Khi bạn sử dụng phương thức animate, tất cả các tên thuộc tính đều phải tuân thủ quy định camel-case
>> Phải viết
paddingLeft thay vì padding-left
marginRight thay vì margin-right
fontSize thay vì font-size
