jquery - 动画完成后使用 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;

我希望在动画(第 2 行)完成后立即更改颜色(在代码的第 3 行)。

非常感谢...

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");
});