animated selector

Selector :animated သည် လက်ရှိတွင် သက်ဝင်လှုပ်ရှားနေသော အစိတ်အပိုင်းများကို ရွေးချယ်ပေးပါသည်။ သင် အကျိုးသက်ရောက်မှု မော်ဂျူး မပါသည့် jQuery အထူးတည်ဆောက်မှုကို အသုံးပြုပါက :animated ကို အသုံးပြုခြင်းသည် အမှားတစ်ခုကို ဖြစ်ပေါ်စေမည်။ :animated သည် CSS သတ်မှတ်ချက်နှင့် မသက်ဆိုင်သောကြောင့် ခေတ်သစ်ဘရောက်ဇာများတွင် စွမ်းဆောင်ရည်ကို မြှင့်တင်ရန် စင်ကြယ်သော css-selector ကို အသုံးပြု၍ အစိတ်အပိုင်းများကို အစတွင် စစ်ထုတ်ပြီးနောက် .filter(':animated') ကို အသုံးပြုသင့်ပါသည်။

Syntax

ဤနည်းအတိုင်း ကျွန်ုပ်တို့သည် သက်ဝင်လှုပ်ရှားနေသော အစိတ်အပိုင်းများကို ရွေးချယ်ပါသည်။

javascript$(':animated');

ဥပမာ

ကျွန်ုပ်တို့ စတုရန်းတစ်ခုပေါ်တွင် animateIt လုပ်ဆောင်ချက်ကို အသုံးပြု၍ သက်ဝင်လှုပ်ရှားမှုတစ်ခု စတင်လုပ်ဆောင်ပါစို့။ #change တပ်ထားသော ခလုတ်ကို နှိပ်သည့်အခါတိုင်း သက်ဝင်လှုပ်ရှားနေသော စတုရန်း၏ အရောင်သည် အစိမ်းရောင်မှ အနီရောင်သို့ နှင့် ပြန်လည်၍ ပြောင်းလဲသွားမည် - colored class ကို toggleClass နည်းလမ်းဖြင့် ဖျက်ခြင်းနှင့် ပေါင်းထည့်ခြင်းအားဖြင့် ဖြစ်ပါသည်။

html<button id="change">ပြောင်းလဲရန်</button>

<div></div>
<div id="test"></div>
cssdiv {
  background: green;
  border: 1px solid #AAA;
  width: 80px;
  height: 80px;
  margin: 0 5px;
  float: left;
}
div.colored {
  background: red;
}
javascript$('#change').click(function() {
  $('div:animated').toggleClass('colored');
});

function animateIt() {
  $('#test').slideToggle('slow', animateIt);
}

animateIt();

ဆက်လက်လေ့လာရန်

  • slideToggle နည်းလမ်း၊
    အရာသည် ပုန်းကွယ်နေသော အစိတ်အပိုင်းများကို ပြသပေးပြီး ပြသထားသော အစိတ်အပိုင်းများကို ပုန်းကွယ်စေပါသည်
  • toggleClass နည်းလမ်း၊
    အရာသည် CSS class ကို ပေါင်းထည့်ခြင်း သို့မဟုတ် ဖျက်ခြင်း ပြုလုပ်ပေးပါသည်
  • find နည်းလမ်း၊
    အရာသည် ရှာဖွေတွေ့ရှိပြီးသော အစိတ်အပိုင်းများအတွင်း၌ အစိတ်အပိုင်းများကို ရှာဖွေပေးပါသည်