需要在悬停Jquery上反复来回旋转答案

【问题标题】：Need to rotate back and forth repeatedly on hover Jquery需要在悬停Jquery上反复来回旋转
【发布时间】：2012-03-19 22:28:04
【问题描述】：

使用 jQuery 旋转 http://code.google.com/p/jqueryrotate/wiki/Examples 将对象从 0 度设置为 40 度

在鼠标悬停、鼠标悬停时可以正常工作 - 但我需要它在两点之间自动循环动画，只要它悬停

需要在午餐前为客户完成...帮助！

    jQuery("#leafmealonepoint").rotate({ 
     bind: 
 { 
    mouseover : function() { 
        jQuery(this).rotate({animateTo:40})
    },
    mouseover : function() { 
        jQuery(this).rotate({animateTo:0})
    }
         }

更新

好的，所以我正在尝试像这样使用 setInterval - 缺少什么？

    function move(){
       jQuery('#leafmealonepoint').rotate({animateTo:40}, function(){
       jQuery(this).rotate({animateTo:0});
       });
     }    

    jQuery('#leafmealone').hover(
        function() {
      hoverInterval = setInterval(move, 1000);
        },
      function(){
    clearInterval(hoverInterval);
    }
    );

进一步更新

     jQuery(function(){
         var leafmealone
         jQuery('#leafmealone').mouseenter(function(){
             leafmealone = setInterval(function()
             {jQuery('#leafmealonepoint').rotate({animateTo:40},
     jQuery('#leafmealonepoint').rotate({animateTo:0}))}, 1000);
         }).mouseleave(function(){clearInterval(leafmealone);
         });
     });

我错过了什么？

【问题讨论】：

据我所知hoverInterval不是全局变量，所以无法清除

标签： jquery jquery-animate rotation mouseover repeat

【解决方案1】：

如果您想在鼠标在该元素上时重复该动画，您需要一个setInterval()，否则这将执行一次动画并在完成时停止，然后鼠标离开将再次执行并再次停止。

编辑：还有 2 个鼠标悬停事件，我认为悬停需要鼠标悬停是错字，或者直接使用 hover()。

【讨论】：

我错过了一些简单的设置间隔...有什么想法吗？
我用你的代码添加了一个虚拟动画，它可以工作，你的问题可能与你正在使用的插件有关。检查您是否正确编写了插件脚本的路径并检查了您的 html。这是工作示例：jsfiddle.net/7AGNE
是的，路径正确，因为我在页面上的其他地方使用相同的插件 - 它旋转到第一个位置，但随后不会返回或移动到第二个位置
我认为是关于插件的，我看的是示例和文档，我没有看到我们可以设置动画时间，它有一个默认值（我可能错了没有看每个评论和页面）。还有一个回调函数的回调，正如我所说的你需要搜索插件，但这似乎工作得很好，但它可能是一个错误的解决方案。我希望它能让你知道如何解决：jsfiddle.net/7AGNE/2，正如我所说我对这个插件没有任何想法，这只是一个临时的。示例中的解决方案，您必须查看它的文档。
不客气。正如我在您的小提琴中看到的，“持续时间”是在此插件中设置动画时间。

【解决方案2】：

尝试做：

jQuery(function(){
    var leafmealone
    jQuery('#leafmealone')
    .mouseenter(function(){
        leafmealone = setInterval(function() {
            jQuery('#leafmealonepoint')
            .rotate({animateTo:40})
            .rotate({animateTo:0});
        }, 1000);
    })
    .mouseleave(function(){
        clearInterval(leafmealone);
    });
});

我不熟悉旋转方法，但这通常是动画完成/链接的方式。

【讨论】：

v 关闭。不过想通了 - 将在 8 小时内发布完整答案jsfiddle.net/nyFjP/20

【解决方案3】：

解决办法

 function leafmealone() {
        jQuery('#leafmealonepoint').stop().rotate({ angle:0, animateTo: 40, duration:600, callback: function() {
            jQuery('#leafmealonepoint').stop().rotate({ animateTo: 0, duration:600});
            }
        });
}

    jQuery(function() {
    jQuery('#leafmealone').hover(function(){
leafmealone();
hoverInterval = setInterval(leafmealone, 1200);
    }, function(){
      clearInterval(hoverInterval);
    });
   })

【讨论】：