简单的动画jQuery不稳定的触发

嗨我有一个约150px宽，300px深的图像。当我翻转它时，我想要一个小图像在上面弹出。当我滚出更大的图像时，我希望较小的图像消失。简单的动画jQuery不稳定的触发

这一切都有效，但是如果将鼠标悬停在新图像弹出的触发图像上，那么它看起来会进入某种循环或在您移动鼠标时行为不正常。我试过悬停和鼠标悬停/悬空。我期望它在鼠标移动时触发滚降/滚动事件。

你可以看到这个提前www.ypfservice.net

感谢

，这里是我的jQuery：

$(document).ready(function() { 
    var numberLinks = $('a.panelImage').length; 

    for (var j = 0; j < numberLinks; j++) { 

     var currentLink = $('a.panelImage').eq(j); 

     // var currentLink = $('a.panelImage:eq('+j+')');     
     $('<div class="fred"></div>').insertAfter(currentLink); 

     var gtr = currentLink.position().left + 'px'; 

     $(currentLink).next().css({ // ie div.fred 
      'position': 'absolute', 
      'background-position': '0 0', 
      'top': '100px', 
      'left': gtr, 
      'display': 'none', 
      'width': '5px', 
      'height': '5px', 
      'overflow': 'hidden', 
      'backgroundImage': 'url(http://www.ypfservice.net/templates/ypftemplate/images/foyerPreview.jpg)', 
     }); 

    } 


    $('a.panelImage img').mouseover(function() { 
     $(this).parent().next().stop().animate({ 
      height: '138px', 
      width: '184px' 
     }, 500) 
    }).mouseout(function() { 
     $(this).parent().next().stop().animate({ 
      'width': '0px', 
      'height': '0px' 
     }, 500); 
    }); //end function 

});

来源

2010-10-15 maxelcat

处理的，而不是父元素的鼠标悬停/鼠标移开事件：

$('a.panelImage').parent().mouseover(function() { 
    $(this).find(".panelImage").next().stop().animate({ 
     height: '138px', 
     width: '184px' 
    }, 500) 
}).mouseout(function() { 
    $(this).find(".panelImage").next().stop().animate({ 
     'width': '0px', 
     'height': '0px' 
    }, 500); 
}); //end function

来源

2010-10-15 21:29:53 Emmett

感谢您的回复 - 这非常有意义并且运作良好。 – maxelcat 2010-10-16 19:05:45

好吧，它在FF和IE中工作得很好。但在Opera，Chrome或Safari（pc）中完全没有任何反应。任何想法为什么？谢谢 – maxelcat 2010-10-16 20:23:03

较小的图像是较大的图像的同一个选择的一部分。当你将鼠标移出大图像并将鼠标移动到较小的图像上时，就会触发out和over事件。

尝试给出更大的图像ID，并使用它。

来源

2010-10-15 21:23:34 hookedonwinter

感谢您的提示 - 上面的答案马上工作，所以我会坚持那一个。再次感谢 – maxelcat 2010-10-16 19:08:38

使用的mouseenter和鼠标离开来代替。当你触摸你的动画元素时，jQuery会触发一个mouseout。 mouseenter/mouseleave不会发生这种情况。

来源

2010-10-15 21:34:30 Searle

谢谢 - 已经研究了mouseenter/leave。当我刚刚替换mouseover/out时，这不起作用。我可以看到他们可能会这样做，但是我还没有真正得到我认为必须使用的“约束力”。 – maxelcat 2010-10-16 19:07:25

简单的动画jQuery不稳定的触发

回答

相关问题