For a laugh I have put a Google-esk barrel roll on one of my sites.
All works fine on the first click of the selected element, but it won't fire again after that.
I have tried .click, .on('click', function() {}) and neither work.
Any ideas on how to fix and why this is happening?
Basic jsFiddle here
Source code example;
<html>
<head>
<title>
Roll Me
</title>
<style type="text/css">
</style>
<script>
$(function() {
$('#roll').on('click', function() {
$('body').css({
"-moz-animation-name": "roll",
"-moz-animation-duration": "4s",
"-moz-animation-iteration-count": "1",
"-webkit-animation-name": "roll",
"-webkit-animation-duration": "4s",
"-webkit-animation-iteration-count": "1"
});
});
});
</script>
</head>
<body>
<div id="roll">
<h1>click me</h1>
</div>
</body>
</html>
You need to remove the animation that you applied after it has finished and then re-add it on subsequent clicks.
var $body = $('body');
$('#roll').on('click', function() {
$body.addClass('barrel-roll');
});
$body.on('animationEnd webkitAnimationEnd mozAnimationEnd',function(e) {
$body.removeClass('barrel-roll');
});
#-webkit-keyframes roll {
from { -webkit-transform: rotate(0deg) }
to { -webkit-transform: rotate(360deg) }
}
#-moz-keyframes roll {
from { -moz-transform: rotate(0deg) }
to { -moz-transform: rotate(360deg) }
}
#keyframes roll {
from { transform: rotate(0deg) }
to { transform: rotate(360deg) }
}
.barrel-roll {
-webkit-animation-name: roll;
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count:1;
-moz-animation-name: roll;
-moz-animation-duration: 4s;
-moz-animation-iteration-count:1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="roll">
<h1>click me</h1>
</div>
That's because by that point the body element already has that CSS styling applied. The way to fix it is to remove the style properties from your body element:
setTimeout(function() {
$('body').removeAttr('style');
}, 4000);
I've used setTimeout here to ensure the style attribute gets reset only after your animation has completed (after 4 seconds).
JSFiddle demo.
It isn't the click handler isn't firing. You can verify that with console.log. You need to reset the animation.
After your animation completes, you have already set the animation! The only way to solve this is to remove it again, and then re-trigger it. The best way to do that, however, is CSS classes:
var busy = false;
$('#roll').on('click', function() {
if(busy) return;
else busy = true;
$('body').addClass("do-the-barrel-roll");
setTimeout(function(){
$('body').removeClass("do-the-barrel-roll");
busy = false;
}, 2100);
});
#-webkit-keyframes roll {
from { -webkit-transform: rotate(0deg) }
to { -webkit-transform: rotate(360deg) }
}
#-moz-keyframes roll {
from { -moz-transform: rotate(0deg) }
to { -moz-transform: rotate(360deg) }
}
#keyframes roll {
from { transform: rotate(0deg) }
to { transform: rotate(360deg) }
}
body.do-the-barrel-roll {
-webkit-animation: roll 2s;
-moz-animation: roll 2s;
animation: roll 2s;
-webkit-animation-fill-mode: backwards;
-moz-animation-fill-mode: backwards;
animation-fill-mode: backwards;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div id="roll">
<h1>click me</h1>
</div>
Simple add the class and remove it after the time it takes for the animation to complete. Also, I added a busy to prevent multiple clicks from making this hell.
What is happening is that the css is applied. Since it is already applied then when it is applied again on the next click nothing happens. I have created something that works, adding a class then removing after a timeout that matches the animation length. https://jsfiddle.net/5yqrxvkd/3/
$('#roll').on('click', roll);
function roll(){
$('body').addClass("animate");
setTimeout(function(){
$("body").removeClass("animate");
}, 4000);
}
There may be a better way using animate or something but I'm not that farmiliar with it.
Related
I want to make a simple JavaScript onclick animation. My problem is that when I click onto the button, the animation is executed, but when I click again onto the button, nothing happens. On the third clicks the animation plays again. I want to make that, the animation plays at the second click.
Heres my code"
var anim = document.getElementById("anim");
anim.onclick = function highA() {
var willCheck = document.getElementById("contactId");
if (!willCheck.classList.contains("highAnim")) {
willCheck.classList.add("highAnim");
} else {
willCheck.classList.remove("highAnim");
}
}
#contactId { background: red;}
.highAnim {
background-color: var(--white);
animation-name: highcheck;
animation-duration: 0.35s;
animation-timing-function: ease-in-out;
}
#keyframes highcheck {
0% {transform: rotate(0);}
25% {transform: rotate(1deg);}
50% {transform: rotate(2deg);}
75% {transform: rotate(1deg);}
100% {transform: rotate(0);}
}
<a onclick="anim()" id="anim">Click</a><br><br>
<div id="contactId">Some Text</div>
The issue is because the first click adds the class and triggers the animation, yet the second (and every even numbered click) after that removes the class so nothing happens.
To fix this you can use the animationend event to remove the class automatically after the animation has ended. That way when you next click again the class is added to the element once more and the animation plays. Try this:
var anim = document.getElementById("anim");
var willCheck = document.getElementById("contactId");
anim.addEventListener('click', () => {
willCheck.classList.add("highAnim");
});
willCheck.addEventListener('animationend', () => {
willCheck.classList.remove("highAnim");
});
#contactId { background: red; }
.highAnim {
background-color: var(--white);
animation-name: highcheck;
animation-duration: 0.35s;
animation-timing-function: ease-in-out;
}
#keyframes highcheck {
0% { transform: rotate(0); }
50% { transform: rotate(2deg); }
100% { transform: rotate(0); }
}
<a id="anim">Click</a><br><br>
<div id="contactId">Some Text</div>
Note that I removed the 25% and 75% items in the animation as it's a linear motion from 0% to 50% and back again, so they are not needed. This also helps to make the animation smoother.
Another idea using animationiteration
var anim = document.getElementById("anim");
var willCheck = document.getElementById("contactId");
anim.addEventListener('click', () => {
willCheck.style.animationPlayState="running";
});
willCheck.addEventListener('animationiteration', () => {
willCheck.style.animationPlayState="paused";
});
#contactId {
background: red;
animation: highcheck 0.35s ease-in-out infinite paused;
}
#keyframes highcheck {
50% {
transform: rotate(2deg);
}
}
<a id="anim">Click</a><br><br>
<div id="contactId">Some Text</div>
I want to have a CSS keyframe animation on submit, every time, but currently it only works the first time. Can you see what I'm doing wrong?
CSS:
#keyframes enlarge {
0% {-webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1);}
100% {-webkit-transform: scale(1.5); -ms-transform: scale(1.5); transform: scale(1.5);}
}
.enlarge {
animation-name: enlarge;
animation-duration: 2s;
JS:
var enlarge = function(response) {
document.querySelector("#messageContainer").classList.add("enlarge");
var reset = setTimeout(function() {
document.querySelector("#messageContainer").classList.remove("enlarge");
}, 2000);
};
I half expected the solution to come to me while I was writing this, but it didn't.
Your code appears to work as intended given your description... Try clicking the "Run Code Snippet" below:
var enlarge = function(response) {
document.querySelector("#container").classList.remove("hidden");
document.querySelector("#example").classList.add("enlarge");
var reset = setTimeout(function() {
document.querySelector("#example").classList.remove("enlarge");
document.querySelector("#container").classList.add("hidden");
}, 2000);
};
#example {
background: red;
width: 150px;
}
#keyframes enlarge {
0% {-webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1);}
100% {-webkit-transform: scale(1.5); -ms-transform: scale(1.5); transform: scale(1.5);}
}
.hidden { display: none; }
.enlarge {
animation-name: enlarge;
animation-duration: 2s;
}
<div id="container" class="hidden">
<div id="example">My example text</div>
</div>
<button onclick="enlarge()">Submit</button>
Are you sure your enlarge function is running on every click of the submit button?
Judging by the fact that your enlarge() function takes a "response" parameter, I'm assuming that you're using it in the response handler of an AJAX request -- does this AJAX request return a non-successful error code if the form has already been submitted once? If this function is attached to the onSuccess() method, that would explain why it is only playing the animation once; the request would only be "succeeding" the first time the button was clicked.
There is several questions about how to rotate an image, but I want an animation-like rotating. By an
event (tap) I would like to rotate an image with -5 degree then with 5 degree, but if I write both rotating in
the same function (or eventhandler), the first rotate doesn't appear only the second is visible.
$("#imgdiv").on('taphold', function(e){
//$("#imageID").addClass("swing animated");
$("#imageID").css({"transition-property":"transform","transition-duration":"2s","transform":"rotate(-5deg)"});
$("#imageID").css({"transition-property":"transform","transition-duration":"2s","transform":"rotate(5deg)"});
//$("#imageID").removeClass("swing animated");
});
I have also tried a swing animation with classes (addClass, then removeClass), but with the same result:
#keyframes swing {
25% { transform: rotate(-5deg); }
50% { transform: rotate(0deg); }
75% { transform: rotate(5deg); }
100% { transform: rotate(0deg); }
}
.swing {
transform-origin: top center;
animation-name: swing;
}
.animated {
animation-duration: 1s;
animation-fill-mode: both;
animation-timing-function: linear;
}
You may put the second animation in a setTimeout in order to delay its animation until the first one finishes.
You can also put your transition in the css rather than in JS. Just place the transform value in JS.
Try something like this SAMPLE.
JS:
$(".clickme").click(function(){
//animate to -5deg
$(this).css('transform','rotate(-5deg)');
//animate to 5deg
setTimeout(function(){$(".clickme").css('transform','rotate(5deg)')},1000);
//animate back to root position
setTimeout(function(){$(".clickme").css('transform','rotate(0deg)')},2000);
});
you can do with addclass and removeclass, but there is one mistake in your code.
you are doing addclass and removeclass at the same time. so, animation is not happening or only one time happens
so try setTimeout:
$("#imgdiv").on('click', function(e){
$("#imageID").addClass("swing animated");
setTimeout(function(){
$("#imageID").removeClass("swing animated");
},1000)
});
i have done that in jsfiddle - http://jsfiddle.net/tqn394k9/
I am doing some tests in order to later animate a website and i want to be able to make a button bounce when its clicked on however i cannot seem to get it to work. THe animation for the heading works fine on page load.
This is my entire code
<head>
<script>
function click(test){
test.style.webkitAnimationName = 'bounce';
test.style.webkitAnimationDuration = '3s';
setTimeout(function() {
test.style.webkitAnimationName = '';
}, 4000);
}
</script>
<style>
h1 {
-webkit-animation-duration: 3s;
-webkit-animation-name: slidein;
}
#-webkit-keyframes slidein {
0% {
margin-left: 100%;
width: 300%;
}
100%{
margin-left: 0%;
width: 100%;
}
}
#-webkit-keyframes bounce {
0%, 20%, 50%, 80%, 100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
40% {
-webkit-transform: translateY(-30px);
transform: translateY(-30px);
}
60% {
-webkit-transform: translateY(-15px);
transform: translateY(-15px);
}
}
</style>
<title>Success message</title>
</head>
<body>
<H1> You entered all the data required </H1>
<button onclick="click(this)">amg4aeorg;ji</button>
</body>
can someone please tell me why it isn't working, thank you in advance
EDIT
Ive done some testing and found out the the javascript function isn't actually running, anybody know why? thx
Make a CSS class to wrap the animation, then add that CSS class name to the element.
test.setAttribute('class','bounceThis');
CSS:
.bounceThis {
-webkit-animation: bounce 3s ease-out;
-moz-animation: bounce 3s ease-out;
animation: bounce 3s ease-out;
}
#-webkit-keyframes bounce { ... etc.... }
I have a function that checks mail on every 10 secods, if there is a new email, it make a bubble notification and show the total number of mail.
jQuery("#bubble_mate").text(responseText.totalmail);
jQuery("#bubble_mate").addClass('animating').show();
It animates the bubble, first time I load the page, but this function is set on an interwal, so it should animate the bubble each time there is new mail, but it Doesn't
My animation and other functions are perfect.. it is just it Doesn't animate when it is being called in set interval. it ads the number of total mail.. but no animation.
Please help me.
Regards
Added
This is animating class and css
.animating{
-webkit-animation: animate 1s cubic-bezier(0,1,1,0);
-moz-animation: animate 1s cubic-bezier(0,1,1,0);
-ms-animation: animate 1s cubic-bezier(0,1,1,0);
-o-animation: animate 1s cubic-bezier(0,1,1,0);
animation: animate 1s cubic-bezier(0,1,1,0);
}
#-webkit-keyframes animate{
from {
-webkit-transform: scale(1);
}
to {
-webkit-transform: scale(1.7);
}
}
#-moz-keyframes animate{
from {
-moz-transform: scale(1);
}
to {
-moz-transform: scale(1.7);
}
}
#-ms-keyframes animate{
from {
-ms-transform: scale(1);
}
to {
-ms-transform: scale(1.7);
}
}
#-o-keyframes animate{
from {
-o-transform: scale(1);
}
to {
-o-transform: scale(1.7);
}
}
#keyframes animate{
from {
transform: scale(1);
}
to {
transform: scale(1.7);
}
}
You'll need to remove the class once the animation is completed, and re-add it once you'll need to use it again.
setInterval(function() {
$("#bubble_mate").addClass('animating');
setTimeout(function() {
$("#bubble_mate").removeClass('animating');
}, 1000); // This is the time specified in your CSS
}, 3000); // Example interval time
JSFiddle.
If you are using keyframe animations, you may want to remove the class, then wait 1 ms and re-add the class. Adding the class multiple times will not animate it multiple times.
$('#test').addClass('animated');
setInterval(function(){
$('#test').removeClass('animated');
setTimeout(function(){
$('#test').addClass('animated')
}, 1);
}, 3000);
Will give the test element the class 'animated', which will start the animation, and every 3 seconds, it will remove the class, pause for 1 ms, then re-add it, which will restart the animation.
Source: http://jsfiddle.net/jcolicchio/eV7ET/
To show the slide down effect you have first to hide the div!
$("#simulate").on("click", function() {
console.log("mail in");
$("#bubble_mate").text("10 new mail");
$("#bubble_mate").addClass('animating').hide();
$("#bubble_mate").slideDown(500);
});
try on this fiddle
http://jsfiddle.net/jQmJr/32/
Try:
jQuery("#bubble_mate").hide().show('normal');
I resolved it myself..
in beforeSend function i added this:
beforeSend:function (){
jQuery("#bubble_mate").removeClass('animating');
},
and then on success:
success:function(responseText)
{
if(responseText.mails=='yes')
{
jQuery("#bubble_mate").text(responseText.totalmail);
jQuery("#bubble_mate").addClass('animating').show();
}
}
I used the webkitEndAnimation event to remove the animated class and the end of the animation.
Here is the live example
Code:
$(document).ready(function(){
setInterval(function(){
$('#test').show().addClass('animated');
}, 3000);
$('#test').on('webkitAnimationEnd', function () {
$(this).removeClass('animated').hide();
});
});
If this works for you should think of a way to get the correct event name depending on the users browser