animated selector
Selector :animated သည် လက်ရှိတွင် သက်ဝင်လှုပ်ရှားနေသော
အစိတ်အပိုင်းများကို ရွေးချယ်ပေးပါသည်။
သင် အကျိုးသက်ရောက်မှု မော်ဂျူး မပါသည့် jQuery အထူးတည်ဆောက်မှုကို
အသုံးပြုပါက :animated ကို အသုံးပြုခြင်းသည် အမှားတစ်ခုကို
ဖြစ်ပေါ်စေမည်။ :animated သည် CSS သတ်မှတ်ချက်နှင့်
မသက်ဆိုင်သောကြောင့် ခေတ်သစ်ဘရောက်ဇာများတွင်
စွမ်းဆောင်ရည်ကို မြှင့်တင်ရန် စင်ကြယ်သော css-selector ကို
အသုံးပြု၍ အစိတ်အပိုင်းများကို အစတွင် စစ်ထုတ်ပြီးနောက်
.filter(':animated') ကို အသုံးပြုသင့်ပါသည်။
Syntax
ဤနည်းအတိုင်း ကျွန်ုပ်တို့သည် သက်ဝင်လှုပ်ရှားနေသော အစိတ်အပိုင်းများကို ရွေးချယ်ပါသည်။
$(':animated');
ဥပမာ
ကျွန်ုပ်တို့ စတုရန်းတစ်ခုပေါ်တွင် animateIt
လုပ်ဆောင်ချက်ကို အသုံးပြု၍ သက်ဝင်လှုပ်ရှားမှုတစ်ခု
စတင်လုပ်ဆောင်ပါစို့။ #change တပ်ထားသော
ခလုတ်ကို နှိပ်သည့်အခါတိုင်း သက်ဝင်လှုပ်ရှားနေသော
စတုရန်း၏ အရောင်သည် အစိမ်းရောင်မှ အနီရောင်သို့
နှင့် ပြန်လည်၍ ပြောင်းလဲသွားမည် - colored
class ကို toggleClass
နည်းလမ်းဖြင့် ဖျက်ခြင်းနှင့် ပေါင်းထည့်ခြင်းအားဖြင့်
ဖြစ်ပါသည်။
<button id="change">ပြောင်းလဲရန်</button>
<div></div>
<div id="test"></div>
div {
background: green;
border: 1px solid #AAA;
width: 80px;
height: 80px;
margin: 0 5px;
float: left;
}
div.colored {
background: red;
}
$('#change').click(function() {
$('div:animated').toggleClass('colored');
});
function animateIt() {
$('#test').slideToggle('slow', animateIt);
}
animateIt();
ဆက်လက်လေ့လာရန်
-
slideToggleနည်းလမ်း၊
အရာသည် ပုန်းကွယ်နေသော အစိတ်အပိုင်းများကို ပြသပေးပြီး ပြသထားသော အစိတ်အပိုင်းများကို ပုန်းကွယ်စေပါသည် -
toggleClassနည်းလမ်း၊
အရာသည် CSS class ကို ပေါင်းထည့်ခြင်း သို့မဟုတ် ဖျက်ခြင်း ပြုလုပ်ပေးပါသည် -
findနည်းလမ်း၊
အရာသည် ရှာဖွေတွေ့ရှိပြီးသော အစိတ်အပိုင်းများအတွင်း၌ အစိတ်အပိုင်းများကို ရှာဖွေပေးပါသည်