0

I am trying to highlight a cell when the user click on it by using jQuery .animate()

clickHandler: function() {

var cell = React.findDOMNode(this.refs.cell);

// $(cell).css("background-color", "blue"); // THIS WORK


$(cell).animate({

  backgroundColor: "blue"

}, 1000); // THIS DOESN'T WORK

},

I am also using React.addons.CSSTransitionGroup. Maybe there is a conflict between jQuery .animate and it.

Thank you for any help.

Eric Hth
  • 79
  • 9
  • I don't think it is REACT, jquery has a problem with background-color animation, look here: http://jsfiddle.net/7s0ff5a8/ and here: http://stackoverflow.com/questions/1694295/jquery-background-color-animate-not-working – axel.michel Jun 18 '15 at 15:17
  • Thank you for helping! In fact the problem was that I didn't include jquery color which is required for animating color. – Eric Hth Jun 18 '15 at 16:40

2 Answers2

1

Look at this page tip:http://www.w3schools.com/jquery/eff_animate.asp under the Parameter styles, Description

TIp Color animations are not included in the core jQuery library. If you want to animate color, you need to download the Color Animations plugin from jQuery.com

You have to down load and include the color animate plugin in order to do that. Here is a link:http://plugins.jquery.com/color/ for download.

Nada
  • 63
  • 6
0

If you don't need support for IE9, all other browsers support transitions.

CSS:

.my-color-element { background-color: blue; transition: background-color .4s linear }
.my-color-element.transition { background-color: red; }

JS:

clickHandler: function() {

  var cell = React.findDOMNode(this.refs.cell);
  $(cell).addClass('transition');

},

http://caniuse.com/#search=transition

damianmr
  • 2,511
  • 1
  • 15
  • 15
  • Thank you for helping! In fact jQuery animated does work with reactJS but you need to import jQuery color. – Eric Hth Jun 18 '15 at 16:41