使用JQuery更改CSS動畫完成後

Question

任何人都可以幫助我解決這個與JQuery有關的小問題。我有一個div，當鼠標懸停在標籤上時，我不斷更改它的邊距，我還希望當鼠標移過它們時，這些標籤的顏色會發生變化。

這個函數工作得很好，但是我有一個小問題，只要我把鼠標移到它上面，選項卡的顏色就會改變，而我想要動畫完成然後更改選項卡。

這裏是我使用的代碼：

  case 'cat4' : 
         $('#bg').stop(); 
         $('#bg').animate({'marginLeft': '255px'}, 500); 
         $(this).css('color', '#7f3f97'); 
         $('#bg').css('background-image', 'url(images/3.jpg)'); 
         break; 

我想要的顏色改變（在代碼的第3行）的動畫之後（2號線）完成。

非常感謝......

Answer 1

取而代之的是.animate調用後鏈接他們，把那些.css調用到.animate的complete callback。此外，您可以通過將鍵/值對的對象傳遞給.css來縮短解決方案。

$('#bg').stop().animate({ 
    'marginLeft': '255px' 
}, 500, function() { 
    $(this).css({color: '#7f3f97', backgroundImage: 'url(images/3.jpg)'}); 
}); 

此外，它看起來更簡潔和更易於管理的應用使用.addClass你的CSS：

.newClass{ 
    color: '#7f3f97'; 
    backgroundImage: 'url(images/3.jpg)' 
} 

$('#bg').stop().animate({ 
    'marginLeft': '255px' 
}, 500, function() { 
    $(this).addClass("newClass"); 
}); 

Answer 2

您可以使用animate()回調：

case 'cat4': 
    $('#bg').stop().animate({'marginLeft': '255px'}, 500, function(){ 
     $(this).css({ color:'#7f3f97', backgroundImage:'url(images/3.jpg)' }); 
    }); 

    break;