adding custom animation class to jQuery

Question

I have created a custom animation class in CSS which I am dynamically adding to an element using jQuery. My custom animation class begins once an animate.css animation has completed.

The issue I am having is my custom animation is not playing, and for the life of me I can't figure out what I am doing wrong. I can see in dev tools that the class is being added to my element but the animation is not occurring.

custom-fade css:

.custom-fade{
    -webkit-animation: 3s ease 0s normal forwards 1 custom;
    animation: 3s ease 0s normal forwards 1 custom;
}

@keyframes custom{
    0% { opacity:.5; }
    66% { opacity:.2; }
    100% { opacity:0; }
}

@-webkit-keyframes custom{
    0% { opacity: .5; }
    66% { opacity: .2; }
    100% { opacity: 0; }
}

@-moz-keyframes custom{
    0% { opacity: .5; }
    66% { opacity: .2; }
    100% { opacity: 0; }
}

jQuery:

var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
var fadeInUp = 'animated fadeIn fadeInUp';
var fadeOut = 'animated fadeOut';
var customFade = '.custom-fade';

$('.bg-img').addClass(fadeInUp);

    $('.bg-img').one( animationEnd, function(){
        $(this).removeClass(fadeInUp).addClass('.custom-fade');
    });

Did you intentionally place 'one' for attaching the event handler? $('.bg-img').one(...) — Marylyn Lajato
– Marylyn Lajato, Commented Jul 3, 2017 at 14:12
@eeya I think that is a typo. He wanted to write $('.bg-img').on(...) — Himanshu Upadhyay
– Himanshu Upadhyay, Commented Jul 3, 2017 at 14:20

Ankit Chaudhary · Accepted Answer · 2017-07-03 14:39:20Z

The problem is in adding class. You should give 'custom-fade' instead of '.custom-fade' in addClass().

Sample Code:

jQuery:

var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
var fadeInUp = 'animated fadeIn fadeInUp';
var fadeOut = 'animated fadeOut';
var customFade = '.custom-fade';

$('.bg-img').addClass(fadeInUp);

    $('.bg-img').on( animationEnd, function(){
        $(this).removeClass(fadeInUp).addClass('custom-fade');
    });

.custom-fade{
    -webkit-animation: 3s ease 0s normal forwards 1 custom;
    animation: 3s ease 0s normal forwards 1 custom;
}

@keyframes custom{
    0% { opacity:.5; }
    66% { opacity:.2; }
    100% { opacity:0; }
}

@-webkit-keyframes custom{
    0% { opacity: .5; }
    66% { opacity: .2; }
    100% { opacity: 0; }
}

@-moz-keyframes custom{
    0% { opacity: .5; }
    66% { opacity: .2; }
    100% { opacity: 0; }
}
.bg-img{
width:200px;
height:500px;
background:red;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bg-img"></div>

Collectives™ on Stack Overflow

adding custom animation class to jQuery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related