使用JQuery AFTER动画更改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行).

非常感谢 ...

Answer 1

相反,后链接他们的.animate号召,把这些.css电话接入.animate的完整的回调.此外,您可以通过传递键/值对的对象来缩短解决方案.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");
});