jQuery, onclick change css properties with a transition

Question

In jQuery I have section where onclick it changes some properties. I was wondering if i could include css transitions into this somehow. I tried to add it in just like I did but that just gave it a property it didn't effect it when it does change.

$("#slide1-1").click(function() {
$('.aboutchange').css('color', '#433792');
});

$("#slide1-2").click(function() {
$('.aboutchange').css('color', 'orange');
});

$("#slide1-3").click(function() {
$('.aboutchange').css('color', 'green');
});

$("#slide1-4").click(function() {
$('.aboutchange').css('color', 'red');
});

sorry everyone I figured this out by simply adding css transition to the class. — Not a discord mod
– Not a discord mod, Commented Apr 24, 2012 at 2:05

Faris M · Accepted Answer · 2012-04-23 02:32:41Z

2

You need to use jQuery's animate function for transitions. this will animate to your text color of choice over a period of 1000 milliseconds. jQuery UI gives lots of bonus effects as well.

$("#slide1-1").click(function() {
    $('.aboutchange').animate({ color:'#433792' }, 1000);
});

edit

maybe I didn't understand the question and that's why I got downvoted... if you are trying to use css3 transitions then you should be declaring the transitions and states in css and using .addClass() and .removeClass() to add/remove the appropriate states and transitions

edited Apr 23, 2012 at 2:32

answered Apr 23, 2012 at 2:26

Faris M

5404 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

elclanrs · Accepted Answer · 2012-04-23 02:31:28Z

2

jQuery doesn't provide color animations by default. You need to use jQuery UI which comes with the jquery-color plugin, or you can just use jquery-color. Then you can animate like any other property:

$element.animate({ color: 'blue' });

answered Apr 23, 2012 at 2:31

elclanrs

94.2k21 gold badges137 silver badges171 bronze badges

Collectives™ on Stack Overflow

jQuery, onclick change css properties with a transition

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related