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:

funny

hehe
Người đăng: vào lúc Không có nhận xét nào:

Thứ Năm, 29 tháng 8, 2013

Cài đặt và cấu hình ứng dụng Zend Framework (video training)

Để làm quen với Zend Framework vấn đề khó khăn nhất cho người mới bắt đầu đó là cài đặt và cấu hình ứng dụng. Vì vậy ZendVN xin gửi đến các bạn 2 video hướng dẫn cách cài đặt một module và nhiều module theo chuẩn cho một ứng dụng trên nền Zend Framework. Hi vọng với 2 video này sẽ giúp các bạn làm quen với Zend Framework nhanh hơn.
Người đăng: vào lúc Không có nhận xét nào:
Đăng ký: Bài đăng (Atom)