使用JQuery AFTER动画更改CSS完成

任何人都可以帮我解决JQuery的这个小问题。 我有一个div，当鼠标hover在标签上时我会继续改变它的边距，我还希望当鼠标越过它们时这些标签的颜色会改变。

该function工作得非常好，但是我有一个小问题，当我将鼠标hover在它上面时，标签的颜色会发生变化，而我希望动画完成然后更改标签。

这是我正在使用的代码：

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

我希望在动画（第二行）结束后立即改变颜色（在代码的第3行）。

非常感谢 …

Answer 1

而不是在.animate调用之后将它们链接起来，将这些.css调用放入.animate的完全回调中 。 此外，您可以通过将键/值对的对象传递给.css来缩短解决方案。

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

此外，使用.addClass应用CSS时，它更.addClass ，更易于管理：

 .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;