CODEWITHSUNDEEP
javascriptjquerycsstext
Jorge
Jorge

Reputation: 5676

How can I change the text color with jQuery?

When I hover a text with animation definitely I will use jQuery. Is there a code that will change the color, or size?

Upvotes: 205

Views: 479670

Answers (4)

Michal Miky Jankovský
Michal Miky Jankovský

Reputation: 4293

use CSS instead of jquery

transition: 

div:hover {
    transition: all 1s;
    color: orange;
    font-size: 150%;
}
<div>lorem</div>
<div>ippsum</div>
<div>dolor</div>

or different animation: CSS Tricks | 4 Ways to Animate the Color of a Text Link on Hover

Upvotes: 0

Prog Mania
Prog Mania

Reputation: 624

Or you may do the following

$(this).animate({color:'black'},1000);

But you need to download the color plugin from here.

Upvotes: 8

Jonah
Jonah

Reputation: 201

Nowadays, animating text color is included in the jQuery UI Effects Core. It's pretty small. You can make a custom download here: http://jqueryui.com/download - but you don't actually need anything but the effects core itself (not even the UI core), and it brings with it different easing functions as well.

Upvotes: 5

Annabelle
Annabelle

Reputation: 10716

Place the following in your jQuery mouseover event handler:

$(this).css('color', 'red');

To set both color and size at the same time:

$(this).css({ 'color': 'red', 'font-size': '150%' });

You can set any CSS attribute using the .css() jQuery function.

Upvotes: 383

Related Questions