完成使用JQuery AFTER动画更改CSS [英] Change CSS using JQuery AFTER animation is done
问题描述
任何人都可以帮助我解决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屋!