Question

我想在鼠标悬停上为我的文字创建一个简单的动画：我希望文本有颜色：蓝色，然后是黄色，然后是绿色。这一切都是通过步骤完成的。

此代码不适合我想要做的事情：

$('p').mouseover(function() {  
    $(this).css( 'color','blue' );  
    $(this).css( 'color','yellow' );  
    $(this).css( 'color','green' );  
    });

$('p').mouseout(function() {  
    $(this).css( 'color','' );  
    });

Answer 1

试试这个......

$('p').each(function(i, item) {
   $(item).mouseover(function() {  
       $(this).css( 'color','blue' );  
       $(this).css( 'color','yellow' );  
       $(this).css( 'color','green' );  
    });
})

$('p').mouseout(function() {  
    $(this).css( 'color','' );  
    });

Answer 2

Hej那里，没有插件可以用jquery动画改变css“color”：

是否可以使用animate（）方法操作所有CSS属性？

是的，差不多！但是，有一件重要的事情需要记住：当与animate（）＆gt;方法一起使用时，所有属性名称必须是驼峰式的：你需要编写paddingLeft而不是padding-left，marginRight而不是margin-right，等等上。

此外，核心jQuery库中不包含颜色动画。   如果你想为颜色设置动画，你需要从jQuery.com下载Color Animations插件。

但你可以尝试使用css3过渡：

p:hover {
    color:blue;
    transition-property:color;
    transition-duration: 2s, 2s;
}

只需将此添加到您的CSS并将鼠标悬停在它上面。

Answer 3

如果你想避免css3过渡，你可以使用jQuery UI的动画功能。

它想要这样的东西......

$('p').mouseover(function() {  

    var textToAnimate = $(this);    

    textToAnimate.animate({'color': 'blue'}, 500, function(){        
        textToAnimate.animate({'color': 'yellow'}, 500, function(){            
            textToAnimate.animate({'color': 'green'}, 500);            
        });        
    });
});

$('p').mouseout(function() {  
    $(this).css( 'color','' );  
});

这是jsfiddle：http://jsfiddle.net/89qB6/8/

Answer 4

尝试这样的事情，

$('p').mouseover(function() {
    $(this).css('color', 'blue').delay(1000)
            .queue(function() {
                $(this).css('color', 'yellow');
                $(this).dequeue();
            }).delay(1000) 
    .queue(function() {
                $(this).css('color', 'green');
                $(this).dequeue();
            });
});

$('p').mouseout(function() {
    $(this).css('color', '');
});

根据需要更改延迟。

FIDDLE

如何按步骤更改颜色

4 个答案: