jQuery - effect

Trong bài này sẽ giới thiệu một số phương thức tạo và quản lý hiệu ứng mà jQuery đã cung cấp.

• slideUp( [thời gian], [hàm thực thi khi hiệu ứng thực hiện xong])
• slideDown( [thời gian], [hàm thực thi khi hiệu ứng thực hiện xong])
• fadeIn( [thời gian], [hàm thực thi khi hiệu ứng thực hiện xong])
• fadeOut( [thời gian], [hàm thực thi khi hiệu ứng thực hiện xong])
Các phương thức này có thể có hoặc không có tham số. Ngoài ra, ta có thể dùng chuỗi "slow" and "fast" để qui định thời gian cho hiệu ứng.

Code

<div>
 <style>
 #effect_div_border{
  display:block;
  width:600px;
  height:180px;
 }
 #effect_div{
  display:block;
 }
 #effect_div img{
  width:130px;
  height:130px;
 }
 </style>
 <script type="text/javascript">
 jQuery(document).ready(function(){
  var fade = false;
  var slide = false;
  jQuery("#fadein").click(function(){
   if (fade){
    jQuery("#effect_div").fadeIn();
    fade=!fade;
    jQuery("#fadeout").removeAttr("disabled");
    jQuery("#fadein").attr("disabled","true");
   }
  });
  jQuery("#fadeout").click(function(){
   if (!fade){
    jQuery("#effect_div").fadeOut();
    fade=!fade;
    jQuery("#fadein").removeAttr("disabled");
    jQuery("#fadeout").attr("disabled","true");
   }
  });
  jQuery("#slideup").click(function(){
   if(!slide){
    jQuery("#effect_div").slideUp();
    slide=!slide;
    jQuery("#slidedown").removeAttr("disabled");
    jQuery("#slideup").attr("disabled","true");
   }
  });
  jQuery("#slidedown").click(function(){
   if(slide){
    jQuery("#effect_div").slideDown();
    slide=!slide;
    jQuery("#slideup").removeAttr("disabled");
    jQuery("#slidedown").attr("disabled","true");
   }
  });
 });
 </script>
 <div id="effect_div_border">
  <input type="button" id="fadein" value="Fade In" disabled/>
  <input type="button" id="fadeout" value="Fade Out"/>
  <input type="button" id="slideup" value="Slide Up"/>
  <input type="button" id="slidedown" value="Slide Down" disabled/>
  <div id="effect_div">
   <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTslH7dYz31POh8LP3t6M0ZCQY4UOTf23zr_KvD__QwprE4pAZY_CZE3vWmD4C-A1u0mkf6YzHAS8iWBjNLxGjb_QOpg08CI4BhQ9pyJfHuDftEwh4JXdOJJOf9ygryyrOJY1PRgbIRBIc/s320/thSesshomaruChibi.jpg"/>
  </div>
 </div>
</div>

Demo

• show
• hide
• toggle
• slideToggle

Code

<div>
 <style>
  #effect_div_border{
   display:block;
   width:600px;
   height:180px;
  }
  .effect_div{
   display:block;
  }
  .effect_div img{
   width:130px;
   height:130px;
  }
 </style>
 <script type="text/javascript">
 jQuery(document).ready(function(){
  var show = false;
  jQuery("#show").click(function(){
   if (show){
    jQuery("#show-hide").show();
    show=!show;
    jQuery("#hide").removeAttr("disabled");
    jQuery("#show").attr("disabled","true");
   }
  });
  jQuery("#hide").click(function(){
   if (!show){
    jQuery("#show-hide").hide();
    show=!show;
    jQuery("#show").removeAttr("disabled");
    jQuery("#hide").attr("disabled","true");
   }
  });
  jQuery("#toggle").click(function(){
   jQuery("#show-hide").toggle();
  });
  jQuery("#slidetoggle").click(function(){
   jQuery("#show-hide").slideToggle();
  });
 });
 </script>
 <input type="button" id="show" value="Show" disabled/>
 <input type="button" id="hide" value="Hide"/>
 <input type="button" id="toggle" value="Toggle"/>
 <input type="button" id="slidetoggle" value="Slide Toggle"/>
 <div id="effect_div_border">
  <div class="effect_div" id="effect_div">
   <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTslH7dYz31POh8LP3t6M0ZCQY4UOTf23zr_KvD__QwprE4pAZY_CZE3vWmD4C-A1u0mkf6YzHAS8iWBjNLxGjb_QOpg08CI4BhQ9pyJfHuDftEwh4JXdOJJOf9ygryyrOJY1PRgbIRBIc/s320/thSesshomaruChibi.jpg"/>
  </div>
 </div>
</div>

Demo