0

現在、マウス ホバー イベントの CSS3 アニメーションがあります。以下を参照してください。

#topo .menu-header ul li:hover a {
    -webkit-animation: menuanimate 0.3s linear 0s both;
    -moz-animation: menuanimate 0.3s linear 0s both;
    -o-animation: menuanimate 0.3s linear 0s both;
    -ms-animation: menuanimate 0.3s linear 0s both;
    animation: menuanimate 0.3s linear 0s both;
}
@-webkit-keyframes menuanimate{
    50% {
        transform: rotateY(90deg);
        -webkit-transform: rotateY(90deg); /* Safari and Chrome */
        -moz-transform: rotateY(90deg); /* Firefox */
        color: #353535; 
        background: url(images/bullets.png) no-repeat;
        background-position: 3px 18px;
    }
    51% {
        transform: rotateY(270deg);
        -webkit-transform: rotateY(270deg); /* Safari and Chrome */
        -moz-transform: rotateY(270deg); /* Firefox */
        color: #fff;
        background: #f15a25;
    }
    100% { 
        color: #fff; background: #f15a25;
        transform: rotateY(360deg);
        -webkit-transform: rotateY(360deg); /* Safari and Chrome */
        -moz-transform: rotateY(360deg); /* Firefox */
    }
}

問題は次のとおりです。ユーザーがマウスをボタンから離すと、そのためのアニメーションがありません。CSSにはマウスアウトイベントがないので、jQueryでそのようなマウスアウトのアニメーションを呼び出す方法はありますか?

よろしくお願いします。

4

1 に答える 1

1

次のようにjQueryで呼び出すことはできませんか？

$('element').hover(function(e)
{
     $(this).css({"rollover animation css in here..."});
},function(e)
{
     $(this).css({"rolloff animation css in here..."});
});

または、2 つのクラス ".over" と ".out" を使用して、ロールオフ時に $(this).addClass("over") と同じものを使用しますか?

于 2012-09-01T02:37:32.260 に答える