使用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;