Question

这让我在过去几天疯狂，我无法弄明白。我对JQuery并不那么方便。我正在使用赞助商Wall插件：

http://tutorialzine.com/2010/03/sponsor-wall-flip-jquery-css/

我要做的是创建一个函数，其中在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);
    }
});

});

Answer 1

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

您是否考虑使用'mouseenter'和'mouseleave'而不是鼠标悬停？这将允许您分离您的逻辑（而不是具有if / else条件）并适当地处理事件？

类似的东西：

$(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小提琴：http://jsfiddle.net/gX2WY/2/

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

编辑（比我的评论更容易阅读）以下是我对JS所做的更改的链接：http://jsfiddle.net/VJsrj/ 以下是带有更改的zip链接：http://www.box.com/s/v5ov3tl09xhr6gf1cj78

有一点需要注意 - Flip插件有一些关于“revertFlip”方法的怪癖。具体来说，它不是动画时被调用的粉丝。我玩了一些逻辑，推迟调用该方法（如果你在动画中鼠标移出），但最终决定删除它（它引起了一些其他问题）

我建议的一件事（可能是未来）是为您的视觉效果考虑CSS，并逐步“增强”用户使用支持的浏览器浏览您的网站的体验。

例如：

http://line25.com/wp-content/uploads/2010/webkit-flip/demo/index.html

此页面适用于所有现代浏览器，但在基于webkit的浏览器（Chrome / Safari）中非常酷 - 您可以通过基本的“：hover”模仿类似的行为，并为支持它的浏览器扩展它！ / p> 祝你好运！如果您有任何其他问题，请与我们联系：）

Answer 2

你需要绑定mouseout事件！

Answer 3

您对.bind()的来电不正确。试试这个：

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

但是，如果您使用的是jQuery 1.7或更高版本，建议您使用.on()代替.bind()。以下是.on()：

的示例

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

此外，在代码的前半部分elem.data('flipped',false)之后，您错过了分号。它可能不是严格要求，但为了以防万一，请将其弹出。

尝试使用鼠标悬停功能时出现无限循环错误

3 个答案: