CODEWITHSUNDEEP
jquerycss
Francesca
Francesca

Reputation: 28178

Animating transition on CSS inserted with jQuery

I'm struggling with getting a CSS transition to animate. I am inserting the new CSS I wish it to animate between with jQuery.

The text has the following transition statement on it when the page is first loaded:

#typer-expertise span{transition:color 1s ease-in;}

The following is then triggered and inserted with jQuery:

Line 46:    $('#'+outputIDName+' span').css('color','#e61873');

Thus changing the colour of the text to #e61873

However I had expected that this change of the attribute color would animate using the transition set on the element in CSS. But it doesn't, instead it merely "flashes" in (no colour fade/change)

What am I doing wrong? Is is the fault of adding the CSS with jQuery?

https://jsfiddle.net/73cgurkL/1/

Upvotes: 0

Views: 54

Answers (2)

user4563161
user4563161

Reputation:

You are much better of using add class to trigger transitions. like below.

Also set a timeout to stop jquery from just registering your color to the dom instantly.

setTimeout(function() {
  $('#typer-expertise span').addClass('change');
}, 100);
#typer-expertise span {
  color: #000;
  transition: color 1s ease-in;
  -webkit-transition: color 1s ease-in;
}
#typer-expertise span.change {
  color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<p id="typer-expertise"><span>Change me</span>
</p>

Upvotes: 1

shennan
shennan

Reputation: 11676

Wrap it in a setTimeout as per this fiddle.

setTimeout(function(){

  $('#' + outputIDName + ' span').css('color', '#e61873');

}, 0);

This forces a reflow of the DOM, which is sometimes needed when applying css properties directly after adding elements in order to honour an animation.

Upvotes: 0

Related Questions