Jquery 尝试使用mouseover函数时出现无限循环错误

在过去的几天里，这让我发疯，我无法理解。我对JQuery不是那么在行。 我正在使用赞助商墙插件：

我想做的是创建一个函数，在mouseenter上翻转图像，在mouseleave上，图像将翻转回原始状态

现在我得到一个无限循环错误

我尝试了这里发布的几个解决方案，但我们运气不佳：-(

这是我的密码。如果有人能帮忙，那就太好了

非常感谢

$(document).ready(function(){
/* The following code is executed once the DOM is loaded */

$('.sponsorFlip').bind("mouseover",function(){

    // $(this) point to the clicked .sponsorFlip element (caching it in elem for speed):

    var elem = $(this);

    // data('flipped') is a flag we set when we flip the element:

    if(elem.data('flipped'))
    {
        // If the element has already been flipped, use the revertFlip method
        // defined by the plug-in to revert to the default state automatically:

        elem.revertFlip();

        // Unsetting the flag:
        elem.data('flipped',false)
    }
    else
    {
        // Using the flip method defined by the plugin:

        elem.flip({
            direction:'tb',
            speed: 350,
            onBefore: function(){
                // Insert the contents of the .sponsorData div (hidden from view with display:none)
                // into the clicked .sponsorFlip div before the flipping animation starts:

                elem.html(elem.siblings('.sponsorData').html());
            }
        });

        // Setting the flag:
        elem.data('flipped',true);
    }
});

});

---

编辑：很抱歉，我误读了您以前的代码（当它是“mouseover”时，我看到了“mouseenter”）

你是否考虑使用鼠标器和鼠标键而不是鼠标开关？这将允许你分离你的逻辑（而不是有I/EL条件）并适当地处理事件？

比如：

$(document).ready(function() {
    $('.sponsorFlip').bind({
        /* FLIP ON ENTER */
        'mouseenter': function(e){
            var $el = $(this);
            $el.flip({  direction: 'lr', 
                speed: 350,
                onBefore: function() {
                $el.html($el.siblings('.sponsorData').html());
              }
            });
         },
         /* REVERT ON LEAVE */
         'mouseleave': function(){
              var $el = $(this);
              $el.revertFlip();
          }
      });           
  });

这是一把JS小提琴：

（我从JS fiddle中删除了flip/revertFlip以防止出现错误-但概念就在那里！）

编辑（比我的评论更容易阅读） 以下是我所做更改的JS fiddle链接： 这里有一个指向zip的链接，其中包含更改：

需要注意的一点是，Flip插件在“revertFlip”方法方面有一些怪癖。具体来说，它不喜欢在制作动画时被调用。我尝试了一些逻辑，延迟调用该方法（如果在动画中鼠标悬停），但最终决定将其删除（这导致了一些其他问题）

我建议的一件事（也许是将来）是考虑将CSS用于您的视觉效果，并逐步“增强”使用受支持浏览器浏览您网站的用户的体验

例如：

这个页面在所有现代浏览器中都很有用，但在基于webkit的浏览器（Chrome/Safari）中却非常酷——你可以通过使用一个基本的“：hover”来模仿类似的行为，并扩展到支持它的浏览器中

---

祝你好运！如果你还有其他问题，请告诉我：）

你需要绑定mouseout事件

对

.bind（）

的调用不正确。试试这个：

$('.sponsorFlip').bind(mouseover: function(){
    ...

但是，如果您使用的是jQuery 1.7或更高版本，建议您使用而不是

.bind（）

。下面是

.on（）

的一个示例：

---

另外，在代码的前半部分中，

elem.data（'flipped'，false）

之后缺少分号。它可能不是严格要求的，但可以放在那里以防万一。

不知道怎么做。我尝试了一些改变代码的方法，但是没有成功。编程对我来说是新的。。。你能告诉我正确的方向吗？这是一个答案还是一个问题？这是一个问题，但我很抱歉，我误读了你以前的代码。我已经更新了我原来的问题！这看起来很完美，但是有没有指定图像而不是文本？是的，您可以指定图像！我看了你的演示页面（）-你还对“翻转”动画感兴趣吗（使用你在原始问题中提供的插件？）是的，如果我能拥有翻转动画，我会很高兴。我已经附加了一个链接，你可以在那里下载文件夹，如果可能的话：它没有工作。我使用的是jQuery1.7.2。当我添加.on（）时，它停止工作。谢谢你在元素数据（'flipped'，false）后面缺少一个分号，这有助于它工作吗？有没有可能设置一个JSFIDLE来演示这一点？或者，使用

.on（）

发布您的尝试？它没有改变任何东西。这是我正在制作的演示：它适合我，尽管当你移动鼠标时它会翻转。它似乎多次检测到鼠标。。。当您输入并重置mouseout上的标志时，可能需要设置一个标志。如果设置了该标志，则让鼠标悬停不执行任何操作。

$('.sponsorFlip').on("mouseover",function(){
    ...