CODEWITHSUNDEEP
jqueryreactjs
Eric Hth
Eric Hth

Reputation: 79

JQuery .animate() not working with ReactJS?

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.

Upvotes: 0

Views: 1655

Answers (2)

damianmr
damianmr

Reputation: 2531

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

Upvotes: 0

ASG
ASG

Reputation: 63

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.

Upvotes: 1

Related Questions