jQuery API の jQuery( ':animated' ) は、アニメーション進行中のすべての要素を選択する。
記述方法
jQuery( 'セレクター:animated' )
セレクターに一致した要素のうち、アニメーション進行中のすべての要素を選択。
実装例(サンプル)
セル | セル | セル |
セル | セル | セル |
セル | セル | セル |
実装例(サンプル)のソースコード
JavaScript
<script type="text/javascript">
<!--
jQuery( function() {
function jqueryApiFadeTo() {
jQuery( '#jquery-api-animated td:odd' ) . fadeTo( 1000, 0.25 ) . fadeTo( 1000, 1, jqueryApiFadeTo );
}
jqueryApiFadeTo();
jQuery( '#jquery-api-click' ) . toggle(
function () {
jQuery( '#jquery-api-animated td:animated' ) . css( {
backgroundColor: 'pink',
} );
},
function () {
jQuery( '#jquery-api-animated td:animated' ) . css( {
backgroundColor: 'yellow',
} );
}
);
} );
// -->
</script>
<!--
jQuery( function() {
function jqueryApiFadeTo() {
jQuery( '#jquery-api-animated td:odd' ) . fadeTo( 1000, 0.25 ) . fadeTo( 1000, 1, jqueryApiFadeTo );
}
jqueryApiFadeTo();
jQuery( '#jquery-api-click' ) . toggle(
function () {
jQuery( '#jquery-api-animated td:animated' ) . css( {
backgroundColor: 'pink',
} );
},
function () {
jQuery( '#jquery-api-animated td:animated' ) . css( {
backgroundColor: 'yellow',
} );
}
);
} );
// -->
</script>
CSS
<style>
<!--
#jquery-api-animated td {
background-color: yellow;
}
-->
</style>
<!--
#jquery-api-animated td {
background-color: yellow;
}
-->
</style>
HTML
<button id="jquery-api-click">toggle</button>
<table id="jquery-api-animated">
<tr>
<td>セル</td>
<td>セル</td>
<td>セル</td>
</tr>
<tr>
<td>セル</td>
<td>セル</td>
<td>セル</td>
</tr>
<tr>
<td>セル</td>
<td>セル</td>
<td>セル</td>
</tr>
</table>
<table id="jquery-api-animated">
<tr>
<td>セル</td>
<td>セル</td>
<td>セル</td>
</tr>
<tr>
<td>セル</td>
<td>セル</td>
<td>セル</td>
</tr>
<tr>
<td>セル</td>
<td>セル</td>
<td>セル</td>
</tr>
</table>