Jquery trigger animation on each click (issue)

Question

I need to trigger the animation on each button click not toggling the button class as I have on my snippet bellow:

I tried with addClass() and removeClass() similar methods, but it doesnt work as expected, here is the code:

$(document).ready(function () {
    $("button[class*='navbar-toggler']").click(function () {
        $(this).toggleClass("my-animation")
    });
})

@keyframes my-animation {
	16.65% {
		transform: translateY(8px);
	}

	33.3% {
		transform: translateY(-6px);
	}

	49.95% {
		transform: translateY(4px);
	}

	66.6% {
		transform: translateY(-2px);
	}

	83.25% {
		transform: translateY(1px);
	}

	100% {
		transform: translateY(0);
	}
}

.my-animation {
		animation-name: my-animation;
		animation-duration: 1s;
		animation-timing-function: ease-in-out;
		animation-iteration-count: 1;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navToggler" aria-controls="navToggler" aria-expanded="false" aria-label="Toggle navigation">
                            <i class="fa fa-bars"></i>
                        </button>

Hiren Vaghasiya · Accepted Answer · 2017-10-04 10:11:31Z

Use setTimeout funtion for remove my-animation class and use

.navbar-toggler{
outline:0!important;
}

$(document).ready(function () {
    if(!$("button[class*='navbar-toggler']").hasClass('my-animation')){
    $("button[class*='navbar-toggler']").click(function () {
        $(this).addClass("my-animation");
        setTimeout(function(){  $("button[class*='navbar-toggler']").removeClass("my-animation"); }, 1000);
    });
    }
})

@keyframes my-animation {
	16.65% {
		transform: translateY(8px);
	}

	33.3% {
		transform: translateY(-6px);
	}

	49.95% {
		transform: translateY(4px);
	}

	66.6% {
		transform: translateY(-2px);
	}

	83.25% {
		transform: translateY(1px);
	}

	100% {
		transform: translateY(0);
	}
}

.my-animation {
		animation-name: my-animation;
		animation-duration: 1s;
		animation-timing-function: ease-in-out;
		animation-iteration-count: 1;
}

.navbar-toggler{
outline:0!important;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navToggler" aria-controls="navToggler" aria-expanded="false" aria-label="Toggle navigation">
                            <i class="fa fa-bars"></i>
                        </button>

And why it doesnt work if you use $(this).removeClass() instead of $("button[class*='navbar-toggler']").removeClass()??

ramin.nvbn · Accepted Answer · 2019-09-25 05:29:44Z

0

this may help you using

$(document).ready(function () {
    $("button[class*='navbar-toggler']").click(function () {
        $(this).addClass("my-animation");
            setTimeout(function () {
                $('#YourId').removeClass('my-animation');
            }, 200);
    });
})

answered Sep 25, 2019 at 5:29

ramin.nvbn

212 bronze badges

Collectives™ on Stack Overflow

Jquery trigger animation on each click (issue)

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related