ဂေဟိန်း အကျိုးဆက်
ဂေဟိန်း သည် အက်ဆာဗီ ကို ဖုံးကွဲခြင်း၊ ပြခြင်း၊ ပြောင်းလဲခြင်း၊ လှည့်လှည်းခြင်း နှင့် ကိုယ်ပိုင် လှည့်လှည်း လုပ်ဆောင်ခြင်း စသည်များ ကို ဖွဲ့စည်းနိုင်သည်။
ကျွန်ုပ်ကိုယ် ကျင်းပပါ
请试一下这个 jQuery 效果：
CodeW3C.com - 领先的 Web 技术教程站点
在 CodeW3C.com，你可以找到你所需要的所有网站建设教程。
အားလုပ်ကူးလော့
အမှတ်
- jQuery hide()
- အကျဉ်းချုပ် jQuery hide() ဘက်လုပ်ငန်း ကို ပြသည်。
- jQuery hide()
- အကျဉ်းချုပ် hide() ကို ပြသည်။ တခါတည်း အချက်အလက်များ ကို ကျဆင်းစေသည်。
- jQuery slideToggle()
- အကျဉ်းချုပ် slide panel အကျိုးသုံးအခြေအနေ ကို ပြသည်。
- jQuery fadeTo()
- အကျဉ်းချုပ် jQuery fadeTo() ဘက်လုပ်ငန်း ကို ပြသည်。
- jQuery animate()
- အကျဉ်းချုပ် jQuery animate() ဘက်လုပ်ငန်း ကို ပြသည်。
jQuery ကျဆင်း နှင့် ပြုလုပ်ထား
hide() နှင့် show() ဘက်လုပ်ငန်း သည် jQuery ကို အသုံးပြု၍ HTML အရာများ၏ ကျဆင်း သို့မဟုတ် ပြုလုပ်ထား စွမ်းအား ပေးပါ
အမှတ်
$("#hide").စိတ်ခုန်(ဘက်လုပ်ငန်း){
$("p").ကျဆင်း();
});
$("#show").စိတ်ခုန်(ဘက်လုပ်ငန်း){
$("p").ပြုလုပ်ထား();
});
hide() နှင့် show() ဘက်လုပ်ငန်း သည် နှစ်ခုသော ကျင့်ထားခြင်း အပြင် ပြင်ဆင်ခြင်း ဖြစ်သည်: speed နှင့် callback。
အက္ခရာ:
$(selector).ကျဆင်း(အနည်းငှား, ပြန်လည်ဆောင်ရွက်သူ) $(selector).ပြုလုပ်ထား(အနည်းငှား, ပြန်လည်ဆောင်ရွက်သူ)
speed အပြင်အဆို သည် ပြုလုပ်ထား သို့မဟုတ် ကျဆင်းစေသော အနည်းငှား ကို ကျူးဇြော်သည်။ အရာများ ပြုလုပ်ထား သို့မဟုတ် ကျဆင်းစေသော အရာများ ကို အသုံးပြုနိုင်ပါ
callback အပြင်အဆို သည် hide သို့မဟုတ် show ဘက်လုပ်ငန်း ပြီးနောက် ဆောင်ရွက်သော ဘက်လုပ်ငန်းအမည် ဖြစ်ပါသည်။ သင်သည် အထိပ်အရောက် အခန်းများ အောက်မှ အသေးစိတ်ပြီး အကျဉ်းချုပ် ပြောကြားမည် callback အပ်စား သတင်းပေးချက်
အမှတ်
$("button").click(function(){
$("p").ကျဆင်း(1000);
});
jQuery ပြန်လည်ဆောင်ရွက်
jQuery ပြန်လည်ဆောင်ရွက်() ဘက်လုပ်ငန်း သည် show() သို့မဟုတ် hide() ဘက်လုပ်ငန်း ကို အသုံးပြု၍ HTML အရာများ၏ ပြန်လည်ဆောင်ရွက်အခြေအနေ ကို ပြောင်းလဲစေသည်。
ပြုလုပ်ထားသော အရာကို ကျဆင်းစေ သို့မဟုတ် ကျဆင်းသော အရာကို ပြုလုပ်ထား
အက္ခရာ:
$(selector).ပြန်လည်ဆောင်ရွက်(အနည်းငှား, ပြန်လည်ဆောင်ရွက်သူ)
speed အပ်စား အမှတ်အသား ကို အသုံးပြုနိုင်သော အမှတ်အသားများမှာ "slow", "fast", "normal" သို့မဟုတ် နာရီ။
အမှတ်
$("button").click(function(){
$("p").ပြန်လည်ဆောင်ရွက်();
});
callback အပ်စား သတင်းပေးချက် ကို ပုံစံအရ အသုံးပြုသော ဖိုင်အား ကို ဖွဲ့စည်းထားသည်။ အောက်ပါ သင်္ချာတွင် အသုံးပြုနိုင်သော အချက်အလက်များ အကြောင်း ပြောဆိုပါမည်။ callback အပ်စား သတင်းပေးချက်
jQuery တက်ကျသွား ဘက်လုပ်ငန်း - ကျသွား, တက်ကျသွားမှာ, ကျသွားခွင့်ပြု
jQuery သည် အောက်ပါ တက်ကျသွား ဘက်လုပ်ငန်းများ ရှိပါသည်:
$(selector).ကျသွား(အနည်းငှား, ပြန်လည်ဆောင်ရွက်သူ) $(selector).တက်ကျသွား(အနည်းငှား, ပြန်လည်ဆောင်ရွက်သူ) $(selector).slideToggle(speed,callback)
speed အပ်စား အမှတ်အသား ကို အသုံးပြုနိုင်သော အမှတ်အသားများမှာ "slow", "fast", "normal" သို့မဟုတ် နာရီ။
callback အပ်စား သတင်းပေးချက် ကို ပုံစံအရ အသုံးပြုသော ဖိုင်အား ကို ဖွဲ့စည်းထားသည်။ အောက်ပါ သင်္ချာတွင် အသုံးပြုနိုင်သော အချက်အလက်များ အကြောင်း ပြောဆိုပါမည်။ callback အပ်စား သတင်းပေးချက်
slideDown() အမှတ်အသား
$(".flip").click(function(){
$(".panel").slideDown();
});
slideUp() အမှတ်အသား
$(".flip").click(function(){
$(".panel").slideUp()
})
slideToggle() အမှတ်အသား
$(".flip").click(function(){
$(".panel").slideToggle();
});
jQuery Fade ဖိုင်အား - fadeIn(), fadeOut(), fadeTo()
jQuery ကို ဖြန့်ကားသော fade ဖိုင်အားများမှာ
$(selector).fadeIn(speed,callback) $(selector).fadeOut(speed,callback) $(selector).fadeTo(speed,opacity,callback)
speed အပ်စား အမှတ်အသား ကို အသုံးပြုနိုင်သော အမှတ်အသားများမှာ "slow", "fast", "normal" သို့မဟုတ် နာရီ။
fadeTo() ဖိုင်အား အပ်စား opacity အပ်စား သတင်းပေးချက် ကို ပြုလုပ်သည်။
callback အပ်စား သတင်းပေးချက် ကို ပုံစံအရ အသုံးပြုသော ဖိုင်အား ကို ဖွဲ့စည်းထားသည်။ အောက်ပါ သင်္ချာတွင် အသုံးပြုနိုင်သော အချက်အလက်များ အကြောင်း ပြောဆိုပါမည်။ callback အပ်စား သတင်းပေးချက်
fadeTo() အမှတ်အသား
$("button").click(function(){
$("div").fadeTo("slow",0.25);
});
fadeOut() အမှတ်အသား
$("button").click(function(){
$("div").fadeOut(4000);
});
jQuery ကူညီရန် လှုပ်ရှားစက်
jQuery ဖိုင်အား ကူညီပြီး ကူညီရန် လှုပ်ရှားစက်အား ဖွဲ့စည်းသည့် ပြောင်းလဲမှု
$(selector).animate({params},[duration],[easing],[callback])
အခြေခံ အပ်စား paramsသူ့ကို လှုပ်ရှားစက်အား ပြုလုပ်သော CSS အချက်အလက်ကို အသုံးပြုသည်။ အချက်အလက်များကို အပူဇော်စွာ အသုံးပြုနိုင်သည်။
animate({width:"70%",opacity:0.4,marginLeft:"0.6in",fontSize:"3em"});
ဒုတိယ အပ်စား durationသူ့ကို လှုပ်ရှားစက်အား အသုံးပြုရန် သတ်မှတ်ထားသော အချိန်ကို အသုံးပြုသည်။ သူ့ကို အသုံးပြုသော အမှတ်အသားများမှာ "slow", "fast", "normal" သို့မဟုတ် နာရီ။
အမှတ် 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>
အမှတ် 2
<script type="text/javascript">
$(document).ready(function(){
$("#start").click(function(){
$("#box").animate({left:"100px"},"slow");
$("#box").animate({fontSize:"3em"},"slow");
});
});
</script>
HTML အကိုင်းအခုံ သည် အတည်းအလွန် အခြေခံ အဆိုပါ အခြေအနေ ဖြင့် ဖြစ်ပါ၍၊ ပြောင်းလဲ မရတဲ့ပါ
အကိုင်းအခုံ ကို ပြန်လည် ပြောင်းလဲ စေတယ် အတွက် အဆိုပါ အချက်အလက် ကို သုံးပြုပါ
jQuery အကျယ်အဝြောက် - ဤ စားပုံအချင်း
| လူကြီး | အကျဉ်းအလျှင် |
|---|---|
| $(selector).hide() | အကိုင်းအခုံ ကို ဖြိုဖျက် ပေးတယ် |
| $(selector).show() | အကိုင်းအခုံ ကို ပြန်လည် ပေးတယ် |
| $(selector).toggle() | အကိုင်းအခုံ ကို ဖြိုဖျက် နှင့် ပြန်လည် ပေးတယ် |
| $(selector).slideDown() | အကိုင်းအခုံ ကို ပြန်လည် ပေးတယ် |
| $(selector).slideUp() | အကိုင်းအခုံ ကို ဖြိုဖျက် ပေးတယ် |
| $(selector).slideToggle() | အသိအမှတ် အရ အကိုင်းအခုံ ကို ဖြိုဖျက် နှင့် ဖြိုဖျက် ပေးတယ် |
| $(selector).fadeIn() | အကိုင်းအခုံ ကို ပြန်လည် ပေးတယ် |
| $(selector).fadeOut() | အကိုင်းအခုံ ကို ချဲ့ထွင် ပေးတယ် |
| $(selector).fadeTo() | အသိအမှတ် အရ အကိုင်းအခုံ ကို ချဲ့ထွင် ပေးတယ် |
| $(selector).animate() | အသိအမှတ် အရ အသုံးပြုထားသော အကိုင်းအခုံ ကို အလှပ လျှော့သွားစေတယ် |
ပဂိုး စာအုပ် အပြည့်အစုံ အတွက် ကျွန်ုပ်၏ jQuery အကျယ်အဝြောက် စာအုပ်。
