我有一个小的 css3 动画,它使我的文本从白色变为蓝色,然后从蓝色变为白色(当鼠标不再位于元素上时恢复正常)。
nav a {
display: block;
height: 20px;
font-size: 16px;
text-decoration: none;
color: #FFFFFF;
transition: color 1s;
-webkit-transition: color 1s;
}
nav a:hover {
color: #0092DB;
}
这工作正常,直到 jquery 启动这个动画:
$(function() {
$('#headerCenter img').hover(
function () {
$('nav a').animate({
color: "#0092DB"
}, 500);
},
function () {
$('nav a').animate({
color: "#FFFFFF"
}, 500);
})
})
CSS3 用于单独的
我注意到,当启动 Jquery 动画时,它将样式属性添加到我的 中,并使用正确的颜色并删除样式表中的颜色。
我认为这就是我的 CSS3 动画不再起作用的原因,因为它需要颜色:#FFFFFF 来进行过渡。希望您有解决方案!!
最佳答案
$(function() {
$('#headerCenter img').hover(
function () {
$('nav a').animate({
color: "#0092DB"
}, 500);
},
function () {
$('nav a').animate({
color: "#FFFFFF"
}, 500, function () {
$('nav a').removeAttr('style');
});
})
})
只是添加了一个回调函数来删除de inline styling!
关于JQuery/CSS3 动画冲突,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17479580/