アニメーション中かどうか判断したい

こういう場面が出てくるかどうかわかりませんが、たまに出てくると思います。
たとえば。。。。うーむ。

それには is() を使います。
is(:animated) とすればアニメーション中かどうか
is(:visible) とすれば表示されているかどうか
というように、状態を確認することができます。

いか、サンプルになります。







$(function(){
        $('#start').click(function(){
                $('#target').hide(2000);
                $('#target').show(2000);
        });
        $('#check').click(function(){
                if($('#target').is(":animated")){
                        $('#result').text("アニメーション中です");
                } else {
                        $('#result').text("アニメーション中ではないです");
                }
        });
});




チェック結果

消えたり現れたり

上記サンプルは”check”ボタンを押すとその下にあるid属性に”target”を持つdiv要素が
アニメーション中かどうかを確認しその結果をid属性に”result”をもつdiv要素に
表示するというものです。

以下で、”start”ボタンが押されたときにidが”target”のdivタグを2秒かけて消して、
直後に2秒かけて出現させます。

$('#start').click(function(){
    $('#target').hide(2000);
    $('#target').show(2000);
});

以下は、”check”ボタンが押されたときに、idが”target”のdivタグがアニメーション中
かどうかをis(“:animated”)でチェックしその結果を表示します。

$('#check').click(function(){
    if($('#target').is(":animated")){
        $('#result').text("アニメーション中です");
    } else {
        $('#result').text("アニメーション中ではないです");
    }
});

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>