Mga epekto ng jQuery
jQuery ay magbuo ng mga epekto ng nakatago, ipapakita, pagpalit, paglihis at anumang adyuhang animasyon.
Subukan ninyo ito personal na
Subukan mo ito na jQuery effect:
CodeW3C.com - Pinakamataas na Web Technology Tutorial Site
Sa CodeW3C.com, makakakita ka ng lahat ng kailangan mong tutorial sa pagbuo ng website.
I-click dito
Sample
- jQuery hide()
- Ipinakita ang simple na jQuery hide() function.
- jQuery hide()
- Ipinakita ang isa pang hide() demo. Paano itatago ang bahaging teksto.
- jQuery slideToggle()
- Ipinapakita ang simple na slide panel effect.
- jQuery fadeTo()
- Ipinapakita ang simple na jQuery fadeTo() function.
- jQuery animate()
- Ipinapakita ang simple na jQuery animate() function.
jQuery Hide and Show
Sa pamamagitan ng hide() at show() function, ang jQuery ay suporta sa pagtatago at pagpapakita ng HTML element:
Sample
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
Ang hide() at show() ay maaaring magkaroon ng dalawang opisyal na parameter: speed at callback.
Syntax:
$(selector).hide(speed,callback) $(selector).show(speed,callback)
speed Ang parameter ay nagtutukoy sa bilis ng pagpapakita o pagtatago. Maaaring itakda ang mga sumusunod na halaga: "slow", "fast", "normal" o miliseconds.
callback Ang mga parameter ay ang pangalan ng function na gagawin pagkatapos mag tapos ang hide o show function. Malalaman mo pa ang higit pang tungkol dito sa mga susunod na kabanata ng tutorial. callback Kakikilala ang mga parameter.
Sample
$("button").click(function(){
$("p").hide(1000);
});
jQuery Toggle
Ang jQuery toggle() function ay gumagamit ng show() o hide() function upang palitan ang estado ng makikita ng HTML element.
Ilang elementong nakahandang ipakita at itatago.
Syntax:
$(selector).toggle(speed,callback)
speed Ang parameter ay maaaring itakda ang mga sumusunod na halaga: "slow", "fast", "normal" o milisegundo.
Sample
$("button").click(function(){
$("p").toggle();
});
callback Ang parameter ay ang pangalan ng function na magsasalita pagkatapos na natapos ang function. Magsasalita ka ng mas marami tungkol dito sa mga susunod na kabanata ng tutorial. callback Kakikilala ang mga parameter.
jQuery sliding function - slideDown, slideUp, slideToggle
jQuery ay may mga sliding function:
$(selector).slideDown(speed,callback) $(selector).slideUp(speed,callback) $(selector).slideToggle(speed,callback)
speed Ang parameter ay maaaring itakda ang mga sumusunod na halaga: "slow", "fast", "normal" o milisegundo.
callback Ang parameter ay ang pangalan ng function na magsasalita pagkatapos na natapos ang function. Magsasalita ka ng mas marami tungkol dito sa mga susunod na kabanata ng tutorial. callback Kakikilala ang mga parameter.
Sample na paggamit ng slideDown()
$(".flip").click(function(){
$(".panel").slideDown();
});
Sample na paggamit ng slideUp()
$(".flip").click(function(){
$(".panel").slideUp();
}
Sample na paggamit ng slideToggle()
$(".flip").click(function(){
$(".panel").slideToggle();
});
jQuery Fade Function - fadeIn(), fadeOut(), fadeTo()
Mayroon ang jQuery ang mga sumusunod na fade function:
$(selector).fadeIn(speed,callback) $(selector).fadeOut(speed,callback) $(selector).fadeTo(speed,opacity,callback)
speed Ang parameter ay maaaring itakda ang mga sumusunod na halaga: "slow", "fast", "normal" o milisegundo.
Sa function na fadeTo() opacity Ang parameter ay nagtatalaga ng pagbawas ng kawalan ng liwanag sa binigay na kawalan ng liwanag.
callback Ang parameter ay ang pangalan ng function na magsasalita pagkatapos na natapos ang function. Magsasalita ka ng mas marami tungkol dito sa mga susunod na kabanata ng tutorial. callback Kakikilala ang mga parameter.
Sample na paggamit ng fadeTo()
$("button").click(function(){
$("div").fadeTo("slow",0.25);
});
Sample na paggamit ng fadeOut()
$("button").click(function(){
$("div").fadeOut(4000);
});
jQuery Custom Animation
Ang sintaksis ng jQuery function sa paglikha ng custom animation:
$(selector).animate({params},[duration],[easing],[callback])
Ang pangunahing parameter ay paramsIto ay naglalarawan ng CSS attribute na magiging animasyon. Maaaring mag-set ng maraming ganitong uri ng attribute:
$(selector).animate({width:"70%",opacity:0.4,marginLeft:"0.6in",fontSize:"3em"});
Ang pangalawang argumento ay durationIto ay naglalarawan ng oras na magagamit sa animasyon. Ang mga ginagamit na halaga ay: "slow", "fast", "normal" o milisegundo.
Sample 1
<script type="text/javascript">
$(document).ready(function(){
$("#start").click(function(){
$("#box").animate({height:300},"slow");
$("#box").animate({width:300},"slow");
$("#box").animate({height:100},"slow");
$("#box").animate({width:100},"slow");
});
});
</script>
Sample 2
<script type="text/javascript">
$(document).ready(function(){
$("#start").click(function(){
$("#box").animate({left:"100px"},"slow");
$("#box").animate({fontSize:"3em"},"slow");
});
});
</script>
Ang HTML na elemento ay naka-staticmethod at hindi mapalilipat.
Kung gusto na maipalilipat ang elemento, ilagay ang CSS position bilang relative o absolute.
jQuery Effekto - Mula sa Pahina Na Ito
| Function | Paglalarawan |
|---|---|
| $(selector).hide() | Itatago ang pinili na elemento |
| $(selector).show() | Ipakita ang pinili na elemento |
| $(selector).toggle() | Palitan (sa pagtatago at pagpapakita) sa pinili na elemento |
| $(selector).slideDown() | Ibigay ng pagbaba (ipinapakita) sa pinili na elemento |
| $(selector).slideUp() | Ibigay ng paguwi (itinatago) sa pinili na elemento |
| $(selector).slideToggle() | Palitan ang paguwi at pagbaba ng pinili na elemento |
| $(selector).fadeIn() | Ibigay ng pagkakapansin sa pinili na elemento |
| $(selector).fadeOut() | Ibigay ng pagkabulok sa pinili na elemento |
| $(selector).fadeTo() | Ibigay ng pagkabulok sa pinili na elemento sa ibinigay na opakidad |
| $(selector).animate() | Ibigay ng sariling animasyon sa pinili na elemento |
Kung gusto ng buong manwal, bisitahin ninyo ang aming Manwal ng jQuery Effect。
