animated Keuseer

Die keuseer :animated kies elemente wat tans by 'n animasie betrokke is. As jy 'n pasgemaakte jQuery-bou gebruik sonder die effekmodule, sal die gebruik van :animated 'n fout veroorsaak. Aangesien :animated nie tot die CSS-spesifikasie behoort nie, is dit vir beter werkverrigting in moderne blaaiers beter om eers die elemente te filtreer met 'n suiwer CSS-keuseer, en dan .filter(':animated') toe te pas.

Sintaksis

So kies ons elemente wat by 'n animasie betrokke is:

javascript$(':animated');

Voorbeeld

Kom ons sorg dat op een van die vierkante 'n animasie met behulp van die funksie animateIt begin. Met elke klik op die knoppie met #change sal die kleur van die geanimeerde vierkant verander van groen na rooi en terug - deur die verwydering en byvoeging van die klas colored met die metode toggleClass:

html<button id="change">verander</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();

Sien ook