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.
<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>
- show
- hide
- toggle
- slideToggle
<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>
