jquery - 悬停时的 Swing 元素动画

Question

我的目标是通过使用 CSS 和一些 jQuery(当然应该在鼠标离开时停止)仅在悬停时摆动一个元素。

在互联网上搜索后，我找到了在文档准备就绪时摆动元素的代码 ( complete 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);
    });
});