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);
    });
});