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

Answer 1

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