jQuery的兩個事件兩個選擇器相同的功能

Question

我想創建一個jQuery動畫。

問題是我想動畫觸發只有在滿足兩個條件。 1.如果(#element1).mouseleave==true and (#element2).mouseleave==true，則觸發該功能。

$(document).ready(function(e) { 
    $('#contact').add('#rt').mouseenter(function(){ 
    $('#contact').animate({bottom:'45px'}).add('#rt').animate({marginTop:'555px'}); 
    }); 
    if(($('#contact').mouseleave()==true)&& ($('#rt').mouseleave()==true)){ 
    $('#contact').animate({bottom:'-2px'}).add('#rt').animate({marginTop:'600px'}); 
} 
}); 

帶鼠標功能的功能正常工作，問題在於mouseleave事件。該功能不會觸發。有什麼建議麼？

Answer 1

你需要做的是在每個元素上設置mouselave，然後當有鼠標離開時，檢查另一個以確保光標位置不在元素之上，反之亦然。如果條件滿足，則用您的動畫調用函數。

Answer 2

試試這個，

$(document).ready(function(e) { 
    $('#contact').add('#rt').mouseenter(function(){ 
     $('#contact').animate({bottom:'45px'}).add('#rt').animate({marginTop:'555px'}); 
    }); 
    $('#contact').mouseleave(function(){ 
     $('#contact').animate({bottom:'-2px'}).add('#rt').animate({marginTop:'600px'}); 
    }); 
}); 

OR

$(document).ready(function(e) { 
    $('#contact').add('#rt').hover(function(){ 
     $('#contact').animate({bottom:'45px'}).add('#rt').animate({marginTop:'555px'}); 
    },function(){ 
     $('#contact').animate({bottom:'-2px'}).add('#rt').animate({marginTop:'600px'}); 
    }); 
}); 

讀hover