完成使用JQuery AFTER动画更改CSS [英] Change CSS using JQuery AFTER animation is done

查看:81
本文介绍了完成使用JQuery AFTER动画更改CSS的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

任何人都可以帮助我解决JQuery的这个小问题.我有一个div,当鼠标悬停在选项卡上时,我会不断更改其边距,我也希望当鼠标悬停在这些选项卡上时,这些选项卡的颜色也会更改.

Can anyone help me solve this little problem with JQuery. I have a div that i keep on changing the margin of it when the mouse hovers over tabs, I also want the color of those tabs to change when the mouse gets over them.

该功能运行正常,但是我有一个小问题,当我希望动画结束然后更改选项卡时,一旦将鼠标悬停在该选项卡上,选项卡的颜色就会更改.

The function is working perfectly fine, but there is one little issue I have, the color of the tab is changing as soon as I get the mouse over it while I want the animation to finish then change the tab.

这是我正在使用的代码:

Here is the code I'm using:

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

我希望在动画(第二行)结束后立即更改颜色(在代码的第三行).

I want the color to change (on the 3rd line of the code) right after the animation (on the 2nd line) finishes.

非常感谢...

推荐答案

而不是在.animate调用之后链接它们,而是将这些.css调用放入.animate

Instead of chaining them after the .animate call, put those .css calls into .animate's complete callback. Also, you can shorten your solution by passing an object of key/value pairs to .css.

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

此外,使用.addClass来应用CSS更为冗长,更易于管理:

Additionally, it is less verbose and more manageable to apply your CSS using .addClass:

.newClass{
    color: '#7f3f97'; 
    backgroundImage: 'url(images/3.jpg)'
}

$('#bg').stop().animate({
    'marginLeft': '255px'
}, 500, function() {
    $(this).addClass("newClass");
});

这篇关于完成使用JQuery AFTER动画更改CSS的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆