syaro.js

$(function() {
    // 揺らしアニメーション管理用のフラグ変数
    var waitShake = false;
    
    $("#syaro_pyonpyon").on({
        "mouseover": function() {
            // マウスが上に乗ったら、揺らしアニメーションを強制的に中断して
            // バウンドアニメーションに切り替えていく
            $(this).removeClass("shake")
                .addClass("animated bounce");
        },
        "click": function() {
            alert('きゃっ！触らないでください！');
            
            if($(this).hasClass("animated bounce")){
                // クリックした瞬間に、バウンドアニメーションを再生していたら
                // すぐには実行せずに、フラグだけを立てて終了する
                waitShake = true;
            }
            else{
                // クリックした瞬間に、バウンドアニメーションを再生してなければ
                // すぐに揺らしアニメーションを実行する
                $(this).addClass("animated shake");
            }
        },
        "webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend": function() {
            // アニメーションが終了したら、全てのアニメーション関連のクラスを一旦取り除く
            $(this).removeClass("animated bounce shake");
            
            // もし、揺らしアニメーションをまだ実行してなかったら
            // 揺らしアニメーション用のクラスを追加して、フラグを取り除く
            if(waitShake){
                waitShake = false;
                $(this).addClass("animated shake");
            }
        }
    });
  
});