Thứ Sáu, 30 tháng 8, 2013

jQuery - animate

Hàm animate dùng để thực hiện một số hiệu ứng đơn giản do người dùng tự định nghĩa dựa theo các css properties của đối tượng. Các cú pháp thường dùng của nó như sau:
  • animate(tập thuộc tính css, thời gian).
  • animate(tập thuộc tính css, thời gian, hàm trả về khi kết thúc).
Một số lưu ý:
  • += và -=: ví dụ ta có một thẻ div có width là 50px, khai báo trong hàmg width:"+=50px" có nghĩa là kết thúc hàm animate đối tượng sẽ có width = 100px. Tương tự với -=.
  • "slow" and "fast": đây là hai từ khóa được jQuery hỗ trợ để định nghĩa thời gian cho hiệu ứng, slow tương đương 600ms, fast tương đương 200ms.
  • "show", "hide" and "toggle": là những từ khóa được jQuery hỗ trợ dùng để thay thế giá trị của các thuộc tính css. VD:
    1. opacity:"toggle" có nghĩa là khi hàm animate được thực thi thuộc tính opacity của đối tượng sẽ có giá trị thay đổi như hàm hiệu ứng toggle.
    2. width:"hide" khi hàm animate được thực thi xong thuộc tính width của đối tượng sẽ bằng 0.
    3. width:"show" ngược lại với hide.
  • Để thao tác được trên các thuộc tính left, top, right, bottom thì bắt buộc position của đối tượng phải là absolute.
Ví dụ:
Hiệu ứng move in, move out đơn giản
Code
 <script type="text/javascript">
  jQuery(document).ready(function(){
   jQuery("#move_div").css("top",(jQuery("#border_div").position().top + 10)+"px");
   jQuery("#move_div").css("left",(jQuery("#border_div").position().left + 10)+"px");
   jQuery("#MoveOut").click(function(){
    jQuery("#move_div").animate({
     left:"+=200px",
     opacity:"hide"
    },2000);
   });
   jQuery("#MoveIn").click(function(){
    jQuery("#move_div").animate({
     left:"-=200px",
     opacity:"show"
    },2000);
   });
  });
 </script>
 <style>
 #border_div{
  display:block;
     width:580px;
     height:150px;
  background-color:#FBF9EA;border:1px solid black;
 }
 #move_div {
  position:absolute;
  width:250px;
  height:120px;
  border:1px solid gray;
  background-color:#F0F0F0;
 }
 </style>
 <input type="button" value="Move Out" id="MoveOut"/>
 <input style="margin-left:10px;" type="button" value="Move In" id="MoveIn"/>
 <div id="border_div">
  <div id="move_div">
   <div style="padding:9px;">
    <span style="color:gray;font-style:italic;">It hurts to love someone and not be loved in return, but what is the most painful is to love someone and never finding the courage to let the person know how you feel.</span>
   </div>
  </div>
 </div>
  1. Demo
    It hurts to love someone and not be loved in return, but what is the most painful is to love someone and never finding the courage to let the person know how you feel.

  2. Hiệu ứng zoom hình đơn giản.
    Code
    <script type="text/javascript">
jQuery(document).ready(function(){
 jQuery("[name='hover_image']").css("top",(jQuery("#hover_div").position().top + 20)+"px");
 var left = 40;
 jQuery("[name='hover_image']").each(function(i,val){
  jQuery(this).css("left",(jQuery("#hover_div").position().left + left)+"px");
  left+=100;
 });
 jQuery("[name='hover_image']").hover(function(){//ham callback hoverIn
  jQuery(this).animate({
   width:"+=20",
   height:"+=20",
   left:"-=10",
   top:"-=10",
   opacity:"1",
   filter:"alpha(opacity=100)"
  },300);
 },function(){//ham callback hoverOut
  jQuery(this).animate({
   width:"-=20",
   height:"-=20",
   left:"+=10",
   top:"+=10",
   opacity:"0.4",
   filter:"alpha(opacity=40)"
  },300);
 });
});
</script>
<style>
#hover_div img{
 float:left;
 position:absolute;
 width:60px;
 height:60px;
 opacity:0.4;
 filter:alpha(opacity=40)
}
</style>
<div id="hover_div" style="height:120px;background-color:#FBF9EA;border:1px solid black;">
<img name="hover_image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQ0aoeZF3AdHWZbAHqBoYY5M0b30khNlPeB_9EsGtyp6u04F1uSHhDrqiNkZk9sN3TjIFiFGM4vOB2VK8Lt9WE6mJ6G8PQcAfRYVTY4BGNRst32x8UZugCnCu5ADXFCcO7RKvzk9MMwX4Z/s400/puppy"/>
<img name="hover_image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQ0aoeZF3AdHWZbAHqBoYY5M0b30khNlPeB_9EsGtyp6u04F1uSHhDrqiNkZk9sN3TjIFiFGM4vOB2VK8Lt9WE6mJ6G8PQcAfRYVTY4BGNRst32x8UZugCnCu5ADXFCcO7RKvzk9MMwX4Z/s400/puppy"/>
<img name="hover_image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQ0aoeZF3AdHWZbAHqBoYY5M0b30khNlPeB_9EsGtyp6u04F1uSHhDrqiNkZk9sN3TjIFiFGM4vOB2VK8Lt9WE6mJ6G8PQcAfRYVTY4BGNRst32x8UZugCnCu5ADXFCcO7RKvzk9MMwX4Z/s400/puppy"/>
</div>
    Demo

  3. Ví dụ về hàm trả về khi thực thi xong.
    Code
    <div style="display:block;width:580px;height:180px;background-color:#FBF9EA;">
 <script type="text/javascript">
 jQuery(document).ready(function(){
  jQuery("#animate_image").css("top",(jQuery("#animate_div").position().top + 5)+"px");
  jQuery("#animate_image").css("left",(jQuery("#animate_div").position().left + 5)+"px");
  jQuery("#hflip").click(function(){
   jQuery("#vflip").attr("disabled","true");
   jQuery("#hflip").attr("disabled","true");
   jQuery("#animate_image").animate({
    width:"-=130px",
    left:"+=65" 
   },2000,function(){
    jQuery("#animate_image").attr("src","https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-jxpx05FGXO5E-wgsPio2s1QGOw0uGGFRnzcAHNc13TdmSzj8yHIuP2CAeBYfA-jgHMwUIwY2Ed4wdlidU_579d7m7wD0h2u78070J15B13J9OyiL762teRo8pbW4_bpUsGlXaolcd9Ij/s1600/hadat1.jpg").animate({
     width:"+=130px",
     left:"-=65" 
    },2000,function(){
     jQuery("#animate_image").attr("src","https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-jxpx05FGXO5E-wgsPio2s1QGOw0uGGFRnzcAHNc13TdmSzj8yHIuP2CAeBYfA-jgHMwUIwY2Ed4wdlidU_579d7m7wD0h2u78070J15B13J9OyiL762teRo8pbW4_bpUsGlXaolcd9Ij/s1600/hadat1.jpg").animate({
      width:"-=130px",
      left:"+=65" 
     },2000,function(){
      jQuery("#animate_image").attr("src","https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsPIQVsXN6ViY2ffJVKt7PAdeeqywgxHa4GBEPXCVRrVyUPZ2Y3_lG9K34dE797ePojKrYgeXRnyGG24GVNXi5sYba89W-ZDQLgnKKvfbnDjg5zHE-D-EqbwRUgLl5wMwKFYmdOkiUPREY/s320/hadat.jpg").animate({
       width:"+=130px",
       left:"-=65" 
      },2000,function (){
       jQuery("#vflip").removeAttr("disabled");
       jQuery("#hflip").removeAttr("disabled");
      });
     });
    });   
   });
  });
  jQuery("#vflip").click(function(){
   jQuery("#hflip").attr("disabled","true");
   jQuery("#vflip").attr("disabled","true");
   jQuery("#animate_image").animate({
    height:"-=130px",
    top:"+=65" 
   },2000,function(){
    jQuery("#animate_image").attr("src","https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaSNEmF2ryCuhoDuGFEVZsWfYAkAqBGWYriX_13RodasJh5Oh89aIL03TNZxuUgm7fZbZxdDzqydALKWV7JhCKmk8QZAuHcWp-Kz09i_2i5avu3phSbIEQAaO8oXRn-mhtOOJKc6JhIGUI/s1600/hadat2.jpg").animate({
     height:"+=130px",
     top:"-=65" 
    },2000,function(){
     jQuery("#animate_image").attr("src","https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaSNEmF2ryCuhoDuGFEVZsWfYAkAqBGWYriX_13RodasJh5Oh89aIL03TNZxuUgm7fZbZxdDzqydALKWV7JhCKmk8QZAuHcWp-Kz09i_2i5avu3phSbIEQAaO8oXRn-mhtOOJKc6JhIGUI/s1600/hadat2.jpg").animate({
      height:"-=130px",
      top:"+=65" 
     },2000,function(){
      jQuery("#animate_image").attr("src","https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsPIQVsXN6ViY2ffJVKt7PAdeeqywgxHa4GBEPXCVRrVyUPZ2Y3_lG9K34dE797ePojKrYgeXRnyGG24GVNXi5sYba89W-ZDQLgnKKvfbnDjg5zHE-D-EqbwRUgLl5wMwKFYmdOkiUPREY/s320/hadat.jpg").animate({
       height:"+=130px",
       top:"-=65" 
      },2000,function (){
       jQuery("#vflip").removeAttr("disabled");
       jQuery("#hflip").removeAttr("disabled");
      });
     });
    });   
   });
  });

 });
 </script>
 <style>
 #animate_div {
  width:130px;
  height:130px;
  max-height:130px;
  max-height:130px;
  margin-top:10px;
 }
 #animate_div img{
  display:block;
  position:absolute;
  width:130px;
  height:130px;
 }
 </style>
 <input type="button" value="animate 1" id="hflip"/>
 <input style="margin-left:10px;" type="button" value="animate 2" id="vflip"/>
 <div id="animate_div">
  <img id="animate_image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsPIQVsXN6ViY2ffJVKt7PAdeeqywgxHa4GBEPXCVRrVyUPZ2Y3_lG9K34dE797ePojKrYgeXRnyGG24GVNXi5sYba89W-ZDQLgnKKvfbnDjg5zHE-D-EqbwRUgLl5wMwKFYmdOkiUPREY/s320/hadat.jpg"/>
 </div>
<div>
    Demo
Người đăng: vào lúc

Không có nhận xét nào:

Đăng nhận xét

Đăng ký: Đăng Nhận xét (Atom)