簡單的動畫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不穩定的觸發

回答

相關問題