jQuery懸停：與.rotate一起使用.fadeIn/.fadeOut - 多個鼠標懸停/跳出創建狡猾的動畫

Question

這是我第一次在這裏發帖，我對jQuery相當陌生。

我在我的頁面上有一個div（.container），當我將鼠標懸停在另一個（#containerHover）上時，我想旋轉並淡入。

我使用jQueryRotate3.js 和動畫做什麼，我希望它，消失在同時，懸停迴轉，並淡出，而在mouseleave迴轉動。我也在使用hoverIntent。

我有兩個問題：

• 首先，如果用戶輸入了#containerHover和離開動畫完成之前，它給奇怪動畫，重新進入時尤其如此。我讀過很多有關如何，如果你正在使用.animate停止這個問題 - 通過使用.stop()或插件hoverFlow，但據我所知，他們是與.animate()和不.fadeIn/.fadeOut，或jQueryRotate3插件使用。我試過將.fadeIn()/.fadeOut()更改爲.animate ({opacity: 0} 1500)，但我根本無法完成此任務（這可能是我不擅長jQuery的原因）。

• 其次，它似乎也在.container上徘徊時發生了動畫.fadeIn()/.fadeOut()和.rotate()，這不是我想要的。在事先的任何幫助，並在這裏

感謝是我的代碼：

$(document).ready(function() { 
    $(".container").hide(); 
    $(".containerHover").hoverIntent(function(){ 
     $(".container").fadeIn(2000) .rotate({duration:1500, angle: 270, animateTo:0}); 
    }, 
    function(){ 
     $(".container").fadeOut(1500) .rotate({duration:3000, angle: 0, animateTo:180}); 
    }); 
}); 

Answer 1

好吧......經過多次dicking身邊，這是我固定的第一個問題...

$(document).ready(function() { 
    $(".container").hide(); 

    $(".containerHover").rotate({ 
     bind: 
{ 
mouseover : function(){ 
    $(".container").stop(true,true).fadeIn(1000) .rotate({duration:1500, angle: 180, animateTo:0}) 
    }, 
mouseout : function(){ 
    $(".container").fadeOut(1200) .rotate({duration:1500, angle: 0, animateTo:180}) 
    } 
} 
}); 
}); 

至於第二個問題，我從來沒有設法停止.container發射動畫，所以創建了一個沒有內容的新div，其大小與.container相同，並將其放置在頂部並具有更高的Z-index。