/ / Javascript & Jquery / Comments (2)

Jquery Effects toàn tập


Qua bài trước chúng ta đã được làm quen với các sự kiện trong jQuery,trong bài hôm nay mình sẽ giới thiệu cho các bạn về Jquery Effects qua bài học này chúng ta sẽ thấy được các hiệu ứng ẩn hiện,chuyển động,slide thật đẹp mắt để có thể thêm vào trong website.

jQuery hide() and show()

– Đây là các phương thức ẩn hiện các phần tử nào đó,nếu trong css chúng ta muốn ẩn hiển 1 phần tử nào đó thì chúng ta chỉ cần sử dụng thuộc tính display,còn trong jquery chúng ta có thể sử dụng phương thức hide() show()

+ Ẩn 1 phần tử nào đó:

   $(selector).hide(speed,callback);

+ Hiển thị 1 phần tử nào đó:

   $(selector).show(speed,callback);

+ Chuyển đổi giữa 2 phương thức hide() và show():

   $(selector).toggle(speed,callback);

Trong đó thì:

  1. selector: là phần tử chúng ta muốn ẩn hoặc hiện
  2. speed : là tốc độ ẩn/hiện, có giá trị “slow”, “fast“ và có thể là giá trị số (milliseconds)
  3. callback: là hàm gọi lại khi thực hiện ẩn/hiện xong

Ví dụ:
Ta có mã html như sau:

     <html>
          <head></head>
          <body>
               <div id='content_text'></div>
               <button id='hide'>Ẩn (hide)</button>
               <button id='show'>hiện (show)</button>
               <button id='toggle'>kết hợp (toggle)</button>
          </body>
     </html>

Ta có mã css như sau:

#content_text{background:#333;width:300px;height:100px}

Ta có mã jQuery như sau:

$(document).ready(function() {
      $("button#hide").click(function(){ 
           $("#content_text").hide('slow',function(){
                alert('Đây là hàm callback khi thực hiện ẩn thành công');
           });
      });
      $("button#show").click(function(){
           $("#content_text").show('fast');
      });
      $("button#toggle").click(function(){
           $("#content_text").toggle('100');
      });
});

Và kết quả demo:

jQuery Fading

– Nếu các bạn đã làm quen với thuộc tính opacity trong css thì các bạn đã biết đây là thuộc tính làm mờ ảo phần từ,trong jQuery cũng giúp chúng ta thực hiện việc đó thông qua phương thức fadeInfadeOut.Phương thức này cũng làm ẩn hiện các phần tử như phương thức hide() và show() nhưng về bản chất thì các phần tử khi sử dụng fadeIn() và fadeOut() sẽ chỉ là độ mờ và nét của phần từ khi hiển thị ra

+ Hiển thị (nét) 1 phần tử html:

   $(selector).fadeIn(speed,callback);

+ Ân mờ 1 phần tử html:

   $(selector).fadeOut(speed,callback);

+ Chuyển đổi giữa 2 phương thực fadeIn() và show():

   $(selector).fadeToggle(speed,callback);

+ Mờ dẫn 1 phần tử theo 1 độ mờ nhất định:

   $(selector).fadeTo(speed,opacity,callback);

Trong đó thì:

  1. selector: là phần tử chúng ta muốn ẩn hoặc hiện
  2. speed : là tốc độ làm mờ, có giá trị “slow”, “fast“ và có thể là giá trị số (milliseconds)
  3. callback: là hàm gọi lại khi thực hiện ẩn/hiện xong
  4. opacity: Giá trị opacity trong css

Ví dụ:
Ta có mã html như sau:

     <html>
          <head></head>
          <body>
               <div id='content_text_1'></div>
               <button id='fadeOut'>Ẩn (fadeOut)</button>
               <button id='fadeIn'>Hiện (fadeIn)</button>
               <button id='fadeToggle'>kết hợp (fadeToggle)</button>
               <button id='fadeTo'>Mờ theo mực độ (fadeTo)</button>
          </body>
     </html>

Ta có mã css như sau:

#content_text_1{background:#333;width:300px;height:100px}

Ta có mã jQuery như sau:

$(document).ready(function() {
      $("button#fadeOut").click(function(){
           $("#content_text_1").fadeOut('slow',function(){
                alert('Đây là hàm callback khi thực hiện ẩn thành công');
           });
      });
      $("button#fadeIn").click(function(){
           $("#content_text_1").fadeIn('fast');
      });
      $("button#fadeToggle").click(function(){
           $("#content_text_1").fadeToggle('100');
      });
      $("button#fadeTo").click(function(){
           $("#content_text_1").fadeTo('100', '0.5');
      });
});

Và kết quả demo:

jQuery Sliding

+ Đây là hiệu ứng trượt các phần tử lên và xuống
+ Trượt phần tử xuống:

   $(selector).slideDown (speed,callback);

+ Trượt phần tử lên:

   $(selector).slideUp (speed,callback);

+ Chuyển đổi giữa 2 phương thực slideDown() và slideUp():

   $(selector).slideToggle(speed,callback);

Trong đó thì:

  1. selector: là phần tử chúng ta muốn trượt
  2. speed : là tốc độ trượt, có giá trị “slow”, “fast“ và có thể là giá trị số (milliseconds)
  3. callback: là hàm gọi lại khi thực hiện trượt xong

Ví dụ:
Ta có mã html như sau:

     <html>
          <head></head>
          <body>
               <div id='content_text_2'></div>
               <button id='slideUp'>Trượt lên(slideUp)</button>
               <button id='slideDown'>Trượt xuống(slideDown)</button>
               <button id='slideToggle'>kết hợp (slideToggle)</button>
          </body>
     </html>

Ta có mã css như sau:

#content_text_2{background:#333;width:300px;height:100px}

Ta có mã jQuery như sau:

$(document).ready(function() {
      $("button#slideUp").click(function(){
           $("#content_text_2").slideUp('slow',function(){
                alert('Đây là hàm callback khi thực hiện trượt lên thành công');
           });
      });
      $("button#slideDown").click(function(){
           $("#content_text_2").slideDown('slow');
      });
      $("button#slideToggle").click(function(){
           $("#content_text_2").slideToggle('200');
      });
});

Và kết quả demo:

jQuery Stop

+ Dừng 1 hiệu ứng hay hành động trước khi nó được hoàn tất

+ Cú pháp:

$(selector).stop();

Trong đó thì:

  1. selector: là phần tử đang lựa chọn

Ví dụ:
Ta có mã html như sau:

     <html>
          <head></head>
          <body>
               <div id='content_text_3'></div>
               <button id='slideToggle_stop'>Trượt(slideToggle)</button>
               <button id='stop'>Dừng lại (stop)</button>
          </body>
     </html>

Ta có mã css như sau:

#content_text_3{background:#333;width:300px;height:200px}

Ta có mã jQuery như sau:

$(document).ready(function() {
      $("button#slideToggle_stop").click(function(){
           $("#content_text_3").slideToggle('slow');
      });
      $("button#stop").click(function(){
           $("#content_text_3").stop();
      });
});

Và kết quả demo:

jQuery Animation

+ Hiệu ứng tạo sự chuyển động

$(selector).animate({params},speed,callback);

Trong đó thì:

  1. selector: là phần tử chuyển động
  2. speed : là tốc độ chuyển động, có giá trị “slow”, “fast“ và có thể là giá trị số (milliseconds)
  3. callback: là hàm gọi lại khi thực hiện chuyển động xong
  4. params : các thuộc tính css

Ví dụ:

$(“button.animate").click(function(){
     $("div#animate").animate({
            left:'250px',
            opacity:'0.7',
            height:‘200px',
            width:‘200px'
     });
}); 

jQuery chaining

+ Có thể viết nhiều phương thức,hành động liền kề nhau của cùng 1 phần tử
Ví dụ:

$(document).ready(function()
     {
         $(“#slide").click(function(){
         $("#menu").slideUp(2000).slideDown(2000);
     });
});

Jquery HTML và CSS

Lấy nội dung và thuộc tính

+ Lấy giá trị trong 1 phần tử

  $(selector).val();

+ Lấy nội dung text trong 1 phần tử

  $(selector).text();

+ Lấy mã html trong 1 phần tử

  $(selector).html();

+ y thuộc tính trong 1 phần tử

  $(selector).attr();

Ví dụ:

$(document).ready(function(){
      $(“div#getText").click(function(){ 
            alert("Text: " + $("#test").text());
      });
      $(“div#getHtml").click(function(){
            alert("HTML: " + $("#test").html());
      });
      $(“input#getValue").click(function(){
            alert("Value: " + $("#test").val());
      });
      $(“a#getAttr").click(function(){
            alert($(this).attr("href"));
      });
});

Gắn nội dung và thuộc tính

Ví dụ:

$(document).ready(function(){
    $("#setText").click(function(){
         $("#test1").text("Hello world!");
    });
    $("#setHTML").click(function(){
         $("#test2").html("<b>Hello world!</b>");
    });
    $("#setValue").click(function(){
         $(“input.age").val(“1990");
    });
    $(“a").click(function(){
         $(this).attr({"href" : "http://hocphp.info","title" : “Jquery cơ bản" });
    });
});


04/09/2014
Tags:
Written by nobitacnt

Trong bài viết không tránh khỏi những câu từ chưa chính xác,mong nhận được sự góp ý để website hoàn thiện hơn.Nếu thấy bài viết có ích với bạn hãy like và share để ủng hộ nhé :D.

Bài viết chùng chuyên mục

2 Comments

  1. Duy says:
     /  Reply

    Anh học trường Hàng hải phải không?

    • nobitacnt says:
       /  Reply

      uhm,bạn cùng trường mình ah? 😀

Gửi bình luận

Giới thiệu

Mình tạo ra blog này với mong muốn chia sẻ và học hỏi kinh nghiệm trong quá trình thiết kế website. Website đang trong quá trình phát triển chân thành cảm ơn mọi sự góp ý của các bạn để làm cho website ngày càng hoàn thiên.

DMCA.com Protection Status
Theo dõi qua Email

Tổng hợp các bài viết về

Hoc php - CodeIgniter Framework - Laravel Framework - PHP va MYSQL