複雜的jQuery .hover工作

Question

以下代碼給我帶來很多麻煩。要注意，.hover會更改背景圖像。首先，如何將兩者與.hover結合，而不是單獨的mouseenter和mouseleave？其次，我怎樣才能讓div在向上移動的同時，背景圖像同時消失？

$('div.designbox.orangehello').mouseenter(function() { 
    $('div.designbox.orangehello').animate({ 
    top: '-=10', 
    }, 55, function() { 
    $(this).addClass('hover'); 
    }); 
}); 

$('div.designbox.orangehello').mouseleave(function() { 
    $('div.designbox.orangehello').animate({ 
    top: '+=10', 
    }, 55, function() { 
    $(this).removeClass('hover'); 
    }); 
}); 

Answer 1

爲了將二者結合起來使用.hover()，這樣做：

$('div.designbox.orangehello').hover(function() { 
    $(this).animate({ top: '-=10' }, 55, function() { 
    $(this).addClass('hover'); 
    }); 
}, function() { 
    $(this).animate({ top: '+=10' }, 55, function() { 
    $(this).removeClass('hover'); 
    }); 
}); 

至於褪色，你需要發佈您的標記，你需要包含其他額外的<div>什麼背景。

其他一些注意事項，你有{ top: '-=10', }爲您的動畫參數...注意那些尾隨逗號，他們會給你麻煩，尤其是在IE瀏覽器。另外，如果您將其中的很多動畫設置爲內部動畫，請將其更改回來，但如果您希望當前動畫僅使用$(this)（如上所述）。