CODEWITHSUNDEEP
jquery
Alexandre
Alexandre

Reputation: 95

Can I fade in a color with jQuery?

I have javascript that changes some HTML with a function like this:

if (correct == "true") {
   $('#ft2').html('Correct');
   $('#ft2').css('color', 'Green')
   $('#ft2').css('border-color', 'Green')
} else {
   $('#ft2').html('Incorrect');
  $('#ft2').css('color', 'Red')
  $('#ft2').css('border-color', 'Red')
}

The text changes very quickly on the page and I would like to make it look better for my users. Is there a way that I can use jQuery to fade in the color? For example have the new color appear over the time of one second.

Upvotes: 1

Views: 2041

Answers (3)

Blazemonger
Blazemonger

Reputation: 92893

If you add jQuery UI, they added support for color animations.

Read http://jqueryui.com/demos/animate/ for details.

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

  <script>
  $(document).ready(function(){
    $(".block").toggle(function() {
      $(this).animate({ color: "#FF0000" }, 1000);
    },function() {
      $(this).animate({ color: "#00FF00" }, 1000);
    });
  });
  </script>

Upvotes: 2

kinakuta
kinakuta

Reputation: 9037

If you want to animate color in jquery, you'll need a plugin:

http://plugins.jquery.com/project/color

Edit: it looks like the link to Resig's plugin is old, so you can also try some of the other plugins that have been written to do the same thing:

http://www.bitstorm.org/jquery/color-animation/

here's a direct link to Resig's original plugin:

http://plugins.jquery.com/files/jquery.color.js.txt

Just save the page as jquery.color.js

Upvotes: 3

2hamed
2hamed

Reputation: 9047

use animate:

$('#div').animate({'background-color': '#ff00ff'});

Upvotes: 0

Related Questions