CODEWITHSUNDEEP
jqueryruby-on-railscoffeescript
Neil
Neil

Reputation: 5178

Change text color within highlight effect, Rails, jQuery UI, CoffeeScript

Original Question: I am able to successfully change the background color within the highlight effect, but I also want to change the text color. Strangely enough: it appears that the color property in this context refers to the background color, not the text color:

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

How do I also specify the text color so that can be changed as well during the effect?

Answer: Along the way I realized I could use dequeue( ) to make both the highlight effect and the animation effect occur simultaneously.

$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()

Upvotes: 3

Views: 1752

Answers (1)

97ldave
97ldave

Reputation: 5249

You are correct, the default color option for the hightlight effect will only change the background color. You could try adding .css on the end:

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

That would change the color of the text.

Alternatively, you could have a css rule and add the class using jQuery:

change-color {
    color: Blue;
}

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

jsFiddle Example

Or, you could use animate() - something like:

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

animate example

Upvotes: 1

Related Questions