JQuery - 這樣做，如果你不是.hover這個div

Question

cardh = 0 

$('.cardgreen > img').hover(function() { 
    if (cardh == 0) { 
     $('.card > img').animate({ height: 150, width: 193, opacity: '1', left: 0, top: 9 }, 500); 
     $('.anfahrtlink').animate({ opacity: '0' }, 500).animate({ width: 0 }, 0); 
     $('.cardgreen > img').animate({ opacity: '0' }, 500).animate({ opacity: '1' }, 500); 
     cardh = 1 
    } 
}); 

$('.cardgreen > img').notanymore().hover(function() { 
    if (cardh == 1) { 
     $('.cardgreen > img').animate({ opacity: '0' }, 300); 
     $('.anfahrtlink').animate({ width: 84 }, 0).animate({ opacity: '1' }, 500); 
     $('.card > img').animate({ opacity: '1' }, 300).animate({ opacity: '0', width: 0, height: 0, left: 194, top: 75}, 270); 
     cardh = 0 
    } 
}); 

如何說jQuery：做第二件事情，當你沒有徘徊div> img了..？

Answer 1

傳遞給.hover()第二個功能是mouseleave處理程序，就像這樣：

$('.cardgreen > img').hover(function() { 
    $('.card > img').animate({height: 150, width: 193, opacity: '1', left: 0, top: 9},500) 
    $('.anfahrtlink').animate({opacity: '0',},500).animate({width:0},0); 
    $('.cardgreen > img').animate({opacity: '0'},500) 
         .animate({opacity: '1'},500); 
}, function() { 
    $('.cardgreen > img').animate({opacity: '0'},300); 
    $('.anfahrtlink').animate({width:84},0).animate({opacity: '1',},500) 
    $('.card > img').animate({opacity: '1'},300) 
        .animate({opacity: '0', width: 0, height: 0, left:194, top:75},270); 
}); 

.hover()需要2個處理器 - 爲mouseenter和mouseleave，還是喜歡你了，一個單一的處理程序不都。但既然你想懸停「進出」行爲......使用2處理程序版本。

Answer 2

jQuery .hover()方法可以帶2個參數（請看這裏：http://api.jquery.com/hover/）。

.hover(handlerIn(eventObject), handlerOut(eventObject)) 

handlerIn（eventObject） - 當鼠標指針進入元素時執行的函數。 handlerOut（eventObject） - 鼠標指針離開元素時執行的函數。