JQuery addClass for CSS animation not working

Question

I am trying to animate an img within a div by adding a class, what am I doing wrong?

Thanks.

Please see my JSfiddle.

CODE:

HTML

<div class="loader"></div>
<div class="searchWrapper">
  <div class="row">
    <div class="col-xs-3">
      <img src="http://images.hayneedle.com/mgen/master:AMD010.jpg?is=70,70,0xffffff">
    </div>
  </div>

CSS

    .searchWrapper div > img {
  opacity: 0;
  position: relative;
}

.animate-opacity {
  transition: opacity 8s;
  opacity: 1;
  position: relative;
}

JS

function init() {
  $(".searchWrapper div > img").addClass('animate-opacity', function() {
    console.log('Animation complete.');
  });
}
init();

EDIT:

I jave another script which is the page loader and it's running a set interval function, maybe that's the culprit? since i'm getting in my console starting anim but i'm NOT getting any Animation complete. from the function's callback.

Unfortuneatly on jsfiddle it's working great, but not on my computer. Jsfiddle

This is going to be impossible to fix if we can't replicate your problem. — Alex
– Alex, Commented May 27, 2016 at 11:05

GreyRoofPigeon · Accepted Answer · 2016-05-27 10:28:17Z

2

Your CSS isn't specific enough (read more about CSS specificity).

Change

.animate-opacity {

To

.searchWrapper div > img.animate-opacity {

Updated Fiddle

answered May 27, 2016 at 10:28

GreyRoofPigeon

18.1k5 gold badges39 silver badges60 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

GreyRoofPigeon Over a year ago

Also, you didn't load jQuery in your fiddle :)

erezT Over a year ago

Actually, it's not working and i'm guessing it's because another script. Editing question now.

erezT Over a year ago

Question has been edited, on my IDE and with chrome, it's not even going into the function (and logging 'animation complete'), it's not going through the function.

Alex · Accepted Answer · 2016-05-27 13:00:54Z

0

Your CSS for .animate-opacity isn't specific enough, so you have two options:

Give it higher importance:

.searchWrapper div > img.animate-opacity {
Add the opacity using jQuery:

jQuery: $(".searchWrapper div > img").css('opacity','1').addClass('animate-opacity', function(){...});

CSS: .animate-opacity {transition: opacity 8s; position: relative;}

Example - https://jsfiddle.net/0bv2h7nd/6/

UPDATE

addClass() Doesn't have a callback function, so you'll not be able to use this in you case. You will need to use animate() instead:

$(".searchWrapper div > img").animate({opacity: 1}, 8000, function() {
  console.log('Animation complete.');
});

Example - https://jsfiddle.net/0bv2h7nd/24/

edited May 27, 2016 at 13:00

answered May 27, 2016 at 10:43

Alex

9,0612 gold badges29 silver badges44 bronze badges

7 Comments

erezT Over a year ago

Alex, thanks but that's not working either. I'm not even getting the 'animation complete' from the console statement. It's not going through the function at all.

Alex Over a year ago

Ermmm the fiddle works tho. So you must not be applying it to your code correctly.

erezT Over a year ago

Can you throw a few guesses at me why it's not going through the function at all, yet continuing to others after? thanks

Alex Over a year ago

@erezT - Im pretty sure addClass() doesn't have a callback, so you wont be able to run a function like you are. If you want to do that you'll need to use animate().

erezT Over a year ago

excellent @Alex, would you be kind to amend my function, as an answer and 'ill vote it?

|

Collectives™ on Stack Overflow

JQuery addClass for CSS animation not working

2 Answers 2

3 Comments

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related