jQuery animate() နည်းလမ်း
ဥပမာ
၎င်း၏ အမြင့်ကို ပြောင်းလဲခြင်းဖြင့် ဒြပ်စင်တစ်ခု "လှုပ်ရှား"
$("button").click(function(){
$("#box").animate({height: "300px"});
});
အဓိပ္ပါယ်နှင့် အသုံးပြုမှု
Animate() နည်းလမ်းသည် CSS ဂုဏ်သတ္တိအစုံ၏ စိတ်ကြိုက် ကာတွန်းကို လုပ်ဆောင်သည်။
ဤနည်းလမ်းသည် CSS စတိုင်များဖြင့် အစိတ်အပိုင်းတစ်ခုကို ပြည်နယ်တစ်ခုမှ အခြားတစ်ခုသို့ ပြောင်းလဲသည်။ ကာတွန်းအကျိုးသက်ရောက်မှုကို ဖန်တီးရန်အတွက် CSS ပိုင်ဆိုင်မှုတန်ဖိုးကို တဖြည်းဖြည်း ပြောင်းလဲပါသည်။
ဂဏန်းတန်ဖိုးများကိုသာ သက်ဝင်လှုပ်ရှားနိုင်သည် ("margin:30px" ကဲ့သို့)။ စာကြောင်းတန်ဖိုးများ ("နောက်ခံ-အရောင်:အနီရောင်" ကဲ့သို့) "ရှိုး" "ဖွက်" နှင့် "ဖွင့်ပိတ်" တို့မှလွဲ၍ ကြိုးတန်းတန်ဖိုးများကို လှုပ်ရှား၍မရပါ။ ဤတန်ဖိုးများသည် ကာတွန်းဒြပ်စင်ကို ဖုံးကွယ်ပြီး ပြသခွင့်ပြုသည်။
အကြံပြုချက်- ဆက်စပ်ကာတွန်းများအတွက် "+=" သို့မဟုတ် "-=" ကိုသုံးပါ။
အထားအသို
(selector).animate({styles},speed,easing,callback)
Parameter | Description |
---|---|
styles | Required. Specifies one or more CSS properties/values to animate. Note: The property names must be camel-cased when used with the animate() method: You will need to write paddingLeft instead of padding-left, marginRight instead of margin-right, and so on. Properties that can be animated: Only numeric values can be animated (like "margin:30px"). String values cannot be animated (like "background-color:red"), except for the strings "show", "hide" and "toggle". These values allow hiding and showing the animated element. |
speed | Optional. Specifies the speed of the animation. Default value is 400 milliseconds Possible values:
|
easing | Optional. Specifies the speed of the element in different points of the animation. Default value is "swing". Possible values:
|
callback | Optional. A function to be executed after the animation completes. To learn more about callback, please read our jQuery Callback chapter |
အစားထိုး Syntax
(selector).animate({styles},{options})
Parameter | Description |
---|---|
styles | Required. Specifies one or more CSS properties/values to animate (See possible values above) |
options | Optional. Specifies additional options for the animation. Possible values:
|
ကိုယ်တိုင်စမ်းကြည့်ပါ - ဥပမာ
() ကို အသုံးပြုခြင်း ကာတွန်းကို ထပ်ခါထပ်ခါ ပြုလုပ်သည့် ကာတွန်းကို ပြန်ခေါ်သည့် လုပ်ဆောင်ချက်ဖြင့် animate() ကို အသုံးပြုနည်း။
ကာတွန်းပုံစံများနှင့် ရွေးချယ်စရာများစွာကို သတ်မှတ်ရန် အလှည့်ကျ အထားအသိုကို အသုံးပြုခြင်း။
အသုံးပြု၍ တိုးတက်မှုဘားတစ်ခုဖန်တီးရန် animate() နည်းလမ်းကို အသုံးပြုနည်း။
နည်း animate() ကို အသုံးပြုနည်း။