CODEWITHSUNDEEP
jquerycss
Spencer May
Spencer May

Reputation: 4525

jQuery, onclick change css properties with a transition

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');
});

Upvotes: 0

Views: 7101

Answers (2)

Faris M
Faris M

Reputation: 540

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

Upvotes: 2

elclanrs
elclanrs

Reputation: 94131

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' });

Upvotes: 2

Related Questions