Hiệu ứng trong jquery

Jquery có nhiều hàm tạo hiệu ứng rất hay. Các hiệu ứng làm cho trang web sống động hơn, như: show, hide, slideToggle, toggle, slideUp, slideDown, animation…

Method	Description
animate()	Runs a custom animation on the selected elements
clearQueue()	Removes all remaining queued functions from the selected elements
delay()	Sets a delay for all queued functions on the selected elements
dequeue()	Removes the next function from the queue, and then executes the function
fadeIn()	Fades in the selected elements
fadeOut()	Fades out the selected elements
fadeTo()	Fades in/out the selected elements to a given opacity
fadeToggle()	Toggles between the fadeIn() and fadeOut() methods
finish()	Stops, removes and completes all queued animations for the selected elements
hide()	Hides the selected elements
queue()	Shows the queued functions on the selected elements
show()	Shows the selected elements
slideDown()	Slides-down (shows) the selected elements
slideToggle()	Toggles between the slideUp() and slideDown() methods
slideUp()	Slides-up (hides) the selected elements
stop()	Stops the currently running animation for the selected elements
toggle()	Toggles between the hide() and show() methods

Hàm hide trong jquery

Hàm hide trong jquery giúp bạn tạo ra hiệu ứng ẩn các tag.  Cú pháp:

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

speed : tốc độ diễn ra hiệu ứng, có thể có các giá trị  slow, fast, hoặc 1 giá trị số (tính bằng milli giây)

callback : là hàm xử lý khi hiệu ứng chạy xong, có thể bỏ qua tham số này nếu không cần dùng

<script>
   $(document).ready(function(){
       $("#lamgon").click(function(){  $("p[ct]").hide(3000); })
   })    
</script>

Nếu có dùng callback:

<script>
$(document).ready(function(){
    $("#lamgon").click(function(){  $("p[ct]").hide(3000, xong); })
})  
function xong() {  $("h3.vt").css("color","red"); }
</script>

Hàm show trong jquery

Hàm show trong jquery giúp bạn tạo ra hiệu ứng hiện các tag đang bị ẩn.  Các tham số giống hàm hide. Cú pháp:

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

Ví dụ:

<script>
    $(document).ready(function(){
        $("#daydu").click(function(){  $("p[ct]").show(3000); })
    })  
</script>

Hàm toggle trong jquery

Hàm toggle đảo trạng thái ẩn hiện của tag được chọn. Các tham số  giống hàm hide. Cú pháp:

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

Ví dụ:

<script>
    $(document).ready(function(){
        $("#tp").click(function(){  $("p[ct]").toggle(3000); })
    })  
</script>

Hàm slideUp trong jquery

Hàm slideUp cuộn lên tag được chọn và biến mất, chiều cuộn là thẳng đứng. Các tham số  giống hàm hide. Cú pháp:

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

Ví dụ:

<script>
$(document).ready(function(){
    $("#lamgon").click(function(){  $("img:first").slideUp(3000); })
})  
</script>

Hàm slideDown trong jquery

Hàm slideDown cuộn xuống tag được chọn và hiện ra, chiều cuộn là thẳng đứng. Các tham số  giống hàm hide. Cú pháp:

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

Ví dụ:

<script>
$(document).ready(function(){
   $("#daydu").click(function() { $("img:first").slideDown(3000); })
}) 
</script>

Hàm slideToggle trong jquery

Hàm slideToggle đảo trạng trái cuộn ẩn hiện của tag được chọn. Các tham số  giống hàm hide. Cú pháp:

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

Ví dụ:

<script>
$(document).ready(function(){
  $("#hinhdep").click(function(){ $("img:first").slideToggle(3000); })
})  
</script>

Hàm fadeOut trong jquery

Hàm faceOut làm mờ dần đối tượng được chọn và ẩn đi. Các tham số giống hàm hide. Cú pháp:

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

Ví dụ:

<script>
    $(document).ready(function(){
       $("#hinhdep").click(function({ $("img:first").fadeOut(3000); })
    })  
</script>

Hàm fadeIn trong jquery

Hàm faceIn làm rõ dần đối tượng được chọn và hiện ra. Các tham số giống hàm hide. Cú pháp:

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

Ví dụ:

<script>
    $(document).ready(function(){        
        $("#hinhdep").click(function(){  
            $("img:first").hide(); $("img:first").fadeIn(3000);
         })
    })  
</script>

Hàm fadeToggle trong jquery

Hàm fadeToggle chuyển đổi giữa faceIn và fadeOut. Các tham số giống hàm hide. Cú pháp:

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

Ví dụ:

<script>
    $(document).ready(function(){       
        $("#hinhdep").click(function({$("img:first").fadeToggle(3000); })
    })  
</script>

Hàm fadeTo trong jquery

Hàm fadeTo()giúp bạn làm trong suốt đến 1 mức nào đó (giá trị giữa 0 và 1). Cú pháp:

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

Ví dụ:

https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_fadeto

Hàm animate trong jquery

Hàm animate trong jquery chỉnh giá trị của các thuộc tính css trong 1 khoảng thời gian

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

param: là tham số css mưuốn chỉnh.

Ví dụ:

<script> 
$(document).ready(function(){
    $("#hinhdep").click(function(){
        $("img:eq(1)").animate({left: '250px'},1500);
    });
});
</script> 

Ví dụ:

<script> 
$(document).ready(function(){
    $("#hinhdep").click(function(){
        $("img:eq(1)").animate({left: '250px'},1500).animate({top: '-100px'},1500);
    });
});
</script> 

Ví dụ:

<script> 
$(document).ready(function(){
    $("#hinhdep").click(function(){
        $("img:eq(1)").animate(
            {left: '100px', top:'-150px', opacity:0.6, width:'280px', height:'200px'  },
        1500);
    });
});
</script> 

Tham khảo: https://www.w3schools.com/jquery/jquery_animate.asp

Hàm Delay trong jquery

Hàm delay giúp làm trễ 1 khoảng thời gian (slow, fast, hoặc số mili giây) trước khi thực hiện hiệu ứng tiếp theo

$(selector).delay(speed)

https://www.w3schools.com/jquery/eff_delay.asp

Callback Function

• Trong jquery, hàm callback là các hàm thực thi sau khi 1 hiệu ứng hay 1 hàm chính đã thực thi xong 100%. Do đó bạn dùng hàm callback khi muốn làm thêm 1 việc gì đó khi hiệu ứng/hàm trước kết thúc.
• Các lệnh JavaScript thực thi tuần tự từ trên xuống, với các hiệu ứng chạy theo thời gian chỉ định, có thể code ở hàng dưới đã chạy trong khi lệnh phía trên chạy chưa xong, có thể gây ra lỗi. Trường hợp như thế, bạn dùng hàm callback.
• Trong jquery, đa phần các hàm là có tham số callback, đó là điểm mạnh mà jquery hỗ trợ bạn để thực thi các hiệu ứng/hàm 1 cách có thứ lớp.
• Ví dụ :

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

Ví dụ:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> </script>
<link rel="stylesheet" href= "https://stackpath.bootstrapcdn.com/bootstrap/4.4.0/css/bootstrap.min.css">
<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    $("#k1").hide().show(2000, 
    	function(){ $("#k1").css("font-size","150%");}
    );
    //aa
        
  });
});
</script>
<div class="col-6 mx-auto mt-4 text-center"> <h4>LỤC VÂN TIÊN</h4>
<button id="btn1" class="h5">></button>
<p class="khotho bg-info p-2" id="k1">
Trước đèn xem truyện Tây-minh<br>Gẫm cười hai chữ nhân tình éo le,<br>
Hỡi ai lẳng lặng mà nghe,<br>Dữ răn việc trước, lành dè thân sau .
</p></div>

Trong ví dụ trên, hàm callback chỉ chạy sau khi hiệu ứng show thực hiện xong. Bạn sẽ thấy khác biệt khi di chuyển lệnh trong hàm callback xuống sau dòng chữ //aa. Hai cách viết là khác nhau, xem phân tích sau:

Dùng callback: cỡ chữ lớn lên sau khi hàm show chạy xong

  $("#btn1").click(function(){
    $("#k1").hide().show(2000, 
    	function(){ $("#k1").css("font-size","150%");}
    );
    //aa   
  });

Và không dùng callback: cỡ chữ lớn lên ngay, trước khi hiệu ứng show kết thúc

$("#btn1").click(function(){
    $("#k1").hide().show(2000);
    //aa
    $("#k1").css("font-size","150%");   
  });

Code html thực tập hiệu ứng jquery

 <meta charset="utf-8">
 <style> img {position: relative;}</style>
 <div id="menu"><a href=#>Trang chủ</a> | <a href=#>Tin tức</a> | <a href=#>Liên hệ</a>
 <a href="#" id="làmgon">Làm gọn</a> | <a href="#" id="daydu">Đầy đủ</a>
 </div> <hr>
 <div id="main">
     <h2 id="tp" ><a href='#'>THƠ HAY</a></h2>
     <div class="tho">
         <h3 class="vt">CHA ĐÓ</h3>
        <p ct="1">Đường xa heo hút dặm ngàn<br>Đời cha vất vả gian nan thác ghềnh.</p>
        <p ct="23">Sông dài biển rộng trời cao.  <br>Công Cha tôi cũng không sao sánh bằng. </p>
     </div>
     <div class="tho">
         <h3 class="vt">MẸ ĐÂY</h3>
        <p ct="3"> Mẹ tôi hai tiếng thân thươnng<br/>Ôi hai tiếng ấy quý dường ngọc châu</p>
        <p ct="34"> Mẹ ơi con chịu bao điều<br/> Nhưng không chịu nổi thân diều đứt dây</p>     
     </div>
     <hr>
     <div id="dv"> <h5 id="hinhdep" style="margin:0">HÌNH ĐẸP</h5>
        <img src="ga1.jpg" width="200" height="150" border="1" title="Gà mẹ ấp con"> 
        <img src="ga2.jpg"width="200" height="150" border="1" title="Gà mẹ và các con"> 
     </div>
     <img src="me.jpg" title="Thuyền Mẹ" width="410"> 
 </div>