jquery - ホバー時のスイング要素アニメーション

Question

私の目標は、CSS といくつかの jQuery を使用して、ホバー時にのみアイテムをスイングすることです (もちろん、マウス アウトで停止する必要があります)。

インターネットを検索すると、ドキュメントの準備ができたときに要素をスイングするコードが見つかりました(完全な jsFiddle )。

$(document).ready(function() {

    function swing(){
        $('.swing').toggleClass('right');
        setTimeout(swing, 1000);
    }
    swing();
});

.hover() メソッドを使用してみましたが、動作しないようです。この小さな問題を解決するにはどうすればよいですか?

Answer 1

このようなもの：

$(document).ready(function() {
    var id;
    function swing(){
        $('.swing').toggleClass('right');
        id = setTimeout(swing, 1000);
    }
    $(".swing").hover(function() {
        swing();
    },
    function() {
        clearTimeout(id);
    });
});