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的{{3}}。此外，您可以通过将键/值对的对象传递给.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;

使用JQuery AFTER动画更改CSS完成

2 个答案: