jquery - 更改突出显示效果、Rails、jQuery UI、CoffeeScript 中的文本颜色

Question

原始问题:我能够成功更改突出显示效果中的背景颜色，但我也想更改文本颜色。奇怪的是:此上下文中的颜色属性似乎指的是背景颜色，而不是文本颜色:

$newBlogger.effect('highlight', {color: '#DFF2BF'}, 2000)

如何指定文本颜色，以便在效果期间也可以更改？

答案:一路上我意识到我可以使用 dequeue( ) 来使高亮效果和动画效果同时发生。

$newBlogger = $('<%= j render(@blogger) %>').css("color", "#4F8A10").hide()
$("#all_bloggers").append($newBlogger)
$('#new_blogger').fadeOut "fast", ->
    $newBlogger.effect('highlight', {color: '#DFF2BF'}, 1500)
    $newBlogger.animate({"color": "black"}, 1500).dequeue()
    $('#new_link').fadeIn("fast").dequeue()

Answer 1

你是对的，高亮效果的默认color选项只会改变背景颜色。您可以尝试在末尾添加 .css:

$newBlogger.effect('highlight', {color: '#DFF2BF'}, 2000).css("color", "Blue");

这会改变文本的颜色。

或者，您可以使用 css 规则并使用 jQuery 添加类:

change-color {
    color: Blue;
}

$newBlogger.addClass("change-color");
$newBlogger.effect('highlight', {color: '#DFF2BF'}, 2000);

jsFiddle Example

或者，您可以使用 animate() - 类似于:

$newBlogger 
    .animate({
        backgroundColor: "#DFF2BF",
        color: "#fff"
    }, 1000)
    .animate({
        backgroundColor: "#fff",
        color: "#000"        
}, 1000);

animate example