Question

$(".skills span").hover( function(){
$(".skillsIknow").stop().animate({ opacity: '1' },300);
},function(){
$(".skillsIknow").stop().animate({ opacity: '0' },300);
});

我有这个简单的动画：当你将鼠标放在“软件”上时，上面会出现“我知道”的文字。但是当你在Indesign和Illustrator之间移动你的鼠标时，我知道的文字保持白色：是否可以创建一个小的效果，当你在一个单词之间切换时，它会消失并出现？ THKS

PS：有人知道为什么动画颜色白/黑不起作用吗？

http://jsfiddle.net/Vz6z6/

Answer 1

如果你希望它淡出，你需要强制它，否则它会保持悬停状态。尝试：

$(".skillsIknow").stop().animate({ opacity: '1' },300).animate({ opacity: '0' },300);

Answer 2

我同意@Diodeus，你必须强制jQuery淡化它。像这样......

$(".skills span").hover(function () {
    $(".skillsIknow").stop().animate({
        opacity: '1'
    }, 300).animate({
        opacity: '0'
    }, 300);

}, function () {
    $(".skillsIknow").stop().animate({
        opacity: '0'
    }, 300).dequeue();
});

注意，dequeue()用于避免不必要的眨眼。

就悬停时的颜色变化而言，有两种方法可以做到 -

通过CSS :hover read more
使用jquery color

Demo（编辑你的jsFiddle）

注意我在jsFiddle的External Resources部分中包含了jquery.color.js。

每个元素的动画

2 个答案: