• fans
  • 1036 reader
  • followers
Chương 4 – Hiệu ứng
  • Tutorial Details
  • Độ khó: Căn bản
  • Thời gian: 30 phút
  • File size: < 1 Mb
  • Yêu cầu: Mọi đối tượng đều có thể học được
Có 8 bài viết trong series jQuery căn bảnHiển thị
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’‘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().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, paddingborderWidth. 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

chuong 4 - hieu ung

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.

Demon Warlock Website facebook twitter user_email

Tôi được sinh ra ở Việt Nam, nhưng hiện tại đang sống và làm việc tại Mỹ. Ngành tôi học không có liên quan gì đến thiết kế web. Nhưng đây là sở thích từ ngày còn là sinh viên du học, do vậy bây giờ dù cho đang đi làm nhưng tôi vẫn thích dùng thời gian rảnh rỗi của mình để học về thiết kế web. Như các bạn, tôi cũng việc mày mò tự học và khám phá.

  • DUCBM90

    thanks DW nhieu nha

  • Pirates Pirates

    Anh DW cho e hỏi vẫn đoạn code :
    $(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.css(‘fontSize’, num + ‘px’);
    });
    });

    E sửa lại thành :
    $(document).ready(function() {
    var $speech = $(‘div.speech’);
    var defaultSize = $speech.css(‘fontSize’);
    $(‘#switcher button’).click(function() {
    var num = parseFloat(defaultSize , 10 );
    switch (this.id) {
    case ‘switcher-large’:
    num *= 1.4;
    break;
    case ‘switcher-small’:
    num /= 1.4;
    break;
    default:
    num = parseFloat(defaultSize, 10);
    }
    $speech.css(‘fontSize’, num + ‘px’);
    });
    });

    Tại sao khi ấn vào button – ví dụ Large – nó chỉ tăng kích thước lên 1.4 – Chỉ có tác dụng lần click đầu tiên !

  • Sang

    anh ơi. anh cho em xin cái css của chương 4 được hok anh.thân anh.mong chờ phản hồi.:))

  • teoee

    cái này:var $link = $(this);
    if ( $link.text() == “read more” ) {
    $link.text(‘read less’);
    } else {
    $link.text(‘read more’);
    }
    có t/d gì vậy sao em bỏ đi nó vẫn chạy bt

  • bao hoa

    num = parseFloat(def,10);

    cho e hỏi số 10 ở đây có nghĩa la j vậy

  • http://nvt.com.vn Mr Tri

    Trong Jquery cái nào cho loop nhỉ, chẳng hạn như làm 1 cái wiget cho nó hiện ra các bài viết nhưng được 50s nó sẽ tự động slideUp các bài viết khác, cứ mỗi 50s thì hiện ra 1 list các bài viết khác, DW hướng dẫn dùm, dùng cái nào có event timer interval 50s vậy?

    • http://bocau.net Trung

      Dùng ajax để load, bạn tìm hiểu jquery ajax đi nha

  • Chie

    Bài viết chi tiết quá , cám ơn anh đã bỏ công sức để trình bày

  • http://nothing sonoop

    Thanks anh DW, bài viết của anh có hệ thống đi theo một hướng từng tự rất dể hiểu.

    • http://nothing sonoop

      $(document).ready(function(){
      var $increa = $(‘.speech’);
      var def = parseFloat($increa.css(‘fontSize’), 10);
      $(‘#switcher button’).click(function() {
      var num = parseFloat($increa.css(‘fontSize’), 10);
      if(this.id == ‘large’) {
      num += 1;
      }else if (this.id == ‘small’){
      num -= 1;
      }
      else if (this.id == ‘default’){
      num = def;
      }
      $increa.animate({fontSize: num + ‘px’}, 1);
      });

      $(‘p:eq(1)’).hide();
      $(‘a.more’).toggle(function(){
      $(‘p:eq(1)’).show(1000);
      $(this).text(‘Hide Now’);
      return false;
      }, function(){
      $(‘p:eq(1)’).hide(1000);
      $(this).text(‘Show Now’);
      return false;
      });

      $(‘#show a’).click(function(){
      $(‘div#login’).animate({opacity: ‘toggle’}, ’1000′);
      return false;
      });

      $(‘div.label’).click(function(){
      var paraWidth = $(‘div.speech p’).outerWidth();
      var switchWidth = $(this).parent().outerWidth();
      $(this).parent().animate({height: ‘+=20′}, ’1000′)
      .animate({left: ‘+=5px’}, {duration: ’100′, queue: false})
      .fadeTo(‘slow’,0.5)
      .slideUp(‘slow’)
      .fadeTo(‘slow’,1, function(){
      $(this).css(‘backgroundColor’, ‘#f00′);
      })
      .slideDown(‘slow’);

      });

      $(‘p:eq(2)’).css(‘border’, ’1px solid #333′)
      .click(function() {
      $(this).slideUp(‘slow’)
      .next().slideDown(‘slow’);
      });
      $(‘p:eq(3)’).css(‘backgroundColor’, ‘#ccc’).hide();

      $(‘p:eq(3)’).click(function() {
      $(this).slideUp(‘flow’);
      $(‘p:eq(2)’).slideDown(‘flow’);
      });
      });

      Code em chơi 1 lèo vậy có sao hem anh nhỉ?

  • zhaolong

    Anh DW làm thêm cái video hướng dẫn nữa thì thật tuyệt. Mình đang học JQuery của anh. Chắc rùi sẽ có ajax thui :D.

    Thanks anh DW nhìu nhiu.

  • traiphonui

    $(document).ready(function(){
    $(“.a1″).hide();
    $(“.a2″).mouseover(function()
    $(this).siblings().slideToggle(“normal”);
    });
    });
    Bạn cho mình hỏi: Khi mình viết đoạn jquery trên thì khi đưa chuột vào class a1 thì show ra a2. Đưa chuôt vào 1 lần nữa thì ẩn a2. Bây giờ mình muốn khi đưa chuột vào a1 thì hiện a2. Khi rê chuột ra khỏi a1 thì ẩn a2 liền chứ không phải đưa ra ngoài rồi đưa vào 1 lần nữa mới ẩn a2 thì thêm hàm như thế nào?
    Chân thành cảm ơn.

    • Đỗ Văn Tiến

      Không biết có phải thế này không.
      $(document).ready(function(){
      $(“.a1″).hover(function(){
      Hiện .a2
      },function(){
      Ẩn .a2
      });
      });

    • http://ngankute.coo.vn JimmyLin

      @traiphonui says:

      $(document).ready(function(){
      $(‘.a1′).hover(function(){
      $(‘.a2′).show()
      },function(){
      $(‘.a2′).hide()
      });
      });

  • Thoi

    Thanhk nhiều nhe! Tôi đang cố gắng học về jquery và tôi thấy bài viết này hay!

    • http://Đangmò Ku Noob

      anh DW ơi sao mấy bài này ko có link down vay anh

  • Wpine2000

    Anh ơi, trong chuơng 4 phần làm việc với Đa Hợp Phần Tử ấy. em thấy khi dòng 3 ẩn thì dòng thứ 4 không hiện lên mà, nếu được anh chỉnh lại cho chúng em với nhé.
    Cảm ơn anh nhiều.!

  • http://dinhcoi.info kenichifc

    thanks for tutorial :)

  • asterix

    Hi, em muốn hỏi anh về cách thu nhỏ webpage có sử dụng jQuery. Chuyện thế này, e có file CSS định dạng pixel, lúc duyệt web ở cái notebook thì nó ko vừa do quá cỡ.; e có đọc 1 bài viết hướng dẫn sử dụng jQuery để chuyển pixel thành Em. Nhưng do e mới học nên ko hiểu lắm. anh DW giải thích giúp nhé. e nghĩ cái này cũng khá hay hj. Thanks

    Link bài viết bằng tiếng anh:

    http://www.filamentgroup.com/lab/update_jquery_plugin_for_retaining_scalable_interfaces_with_pixel_to_em_con/

  • http://www.programmervn.com/ Truong

    Cảm ơn anh nhé. Vài tháng vừa rồi không thấy anh viết bài nên ít vào, bây giờ thì ngày nào cũng phải zo tìm cái mới. Em chủ yếu làm về .Net nên rất thích các tutorials về jquery và css

  • The-Capslock

    Sự trở lại rất hoành tráng của bác DW! Thanks bác!

  • http://www.izwebz.com Demon Warlock

    @kaylaximuoi: yeah yeah! con đọc mà thấy chỗ nào “cà giựt” thì nói chú để chú sửa nha.

    @h2you: chắc cũng sẽ có mà phải từ từ các chú. Anh muốn lần này tập trung vào jQuery đã. Làm cho xong một phần rồi đến phần kia. Chí để dở dang lâu quá cũng kỳ.

  • kaylaximuoi

    Con đã đọc xong chương 4 rồi, cảm ơn chú nhiều!!! Giờ con quay lại đọc mấy chương trước, thời gian rồi vắng chú, chữ nghĩa cũng lần lượt nối gót ra đi.. :D

  • abcd

    Lâu lăm rồi ko có tut wordpess của anh DW nhỉ, nhớ anh quá :D

    • h2you

      Đúng rồi anh DW ra thêm một số tuts về WP nữa đi.

  • http://it2hut.net tinharvard

    bài viết rất hay và đầy đủ nữa…
    cảm ơn anh…

  • http://butchivn.com/ mrkyt

    Một ngày chưa có Video thì vẫn chưa tin về sự trở lại của DW :(

  • http://www.izwebz.com Demon Warlock

    @LaCrus: đây là dạng ebook mà chứ có phải tutorial đâu mà cần chia ra em. Cái này để cho những ngươi thực sự quan tâm đến jQuery muốn học từ đầu đến cuối.

    @đoan: yeah yeah! sẽ có video thui em. Mới quay lại nên còn hơi “bỡ ngỡ”. :D

  • kiepphongtran2k3

    Bạn ơi, chương 3 bạn nói còn nữa mà sao giờ đã qua chương 4 rồi nè. Dù sao cũng thanks bạn vì những bài viết quá hay

  • đoàn

    anh dw làm 1 video hướng dẫn anh em đi lâu lắm ko dc nghe giọng nói của anh thấy nhớ quá !! lý thuyết đi đôi với thực hành là học nhanh nhất

  • http://pinkhouseshop.tk LaCrus

    Em nghĩ nên chia bài này thành 3 hoặc 4 phần thì hợp lý hơn :|
    http://pinkhouseshop.tk (demo)

    • kats

      Dong y 2 tay voi ban nay

  • Son NT

    Bài viết hay quá! Thank anh DW!

  • http://skyvnn.net Goncorpius

    Chưa đọc hết ,nhưng phải thanks bác vì đã có bài mới hay và bổ ích thế này ,để rảnh ngồi ngâm xem ^^

  • Minh

    Bài viết chi tiết quá, thanks bác

Newbie

Các series nên xem trên izwebz cho newbie

Khi vào izwebz chắc nhiều bạn cho rằng các bài viết trên izwebz đều không có hệ thống gì cả? Thực chất, các bài biết đều đi theo một series của riêng nó, ví dụ như PHP, HTML & CSS, PSD2HTML, Photoshop, illustrator,… Trong bài viết này, mình sẽ tổng hợp lại các series bài viết cần thiết cho một newbie.

Izwebz facebook group

Social connect

Recent Comments

Archives