We Keep Coding

How to add function/element action after animate function runs in javascript?

I have tried searching on SO and google and cant seem to find a decent answer on this question.
I want to remove the element that is being animated after the animation is complete. After the single iteration, it puts the element back where it started. It seems to understand when the animation ends, where to add that last bit?
The code:
svg.animate([
// keyframes
{ transform: 'scale(2.5)'},
{ left: '50px',top:'175px',transform: 'scale(1.0)' }
], {
// timing options
duration: 600,
iterations: 1,
easing:'cubic-bezier(0.89, 0.41, 1, 0.95)'
})
What I want to add:
svg.remove()
Any ideas? thanks!

Use a promise:
Promise.all(
svg.getAnimations().map(
function(animation) {
return animation.finished
}
)
).then(
function() {
return svg.remove()
}
)

Look into animation events
Example:
HTML:
<button>Hello</button>
CSS:
#keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
button {
background-color: red;
animation-name: example;
animation-duration: 2s;
}
JS:
const button = document.querySelector("button");
button.addEventListener("animationend", () => { button.remove(); });
demo

Triggering a JQuery animate function & looping it?

What I'm trying to do is (presumably) relatively simple, but let down by my (admittedly poor) understanding of jquery/Javascript.
The goal is simple - I want to 'animate' the opacity of a background image on a particular div (eventually I will apply this to others on the page, with the animation started/stopped according to the section being viewed - it's a horizontally scrolled page split into 'panels' the the viewer navigates with < & > buttons or named links).
Here's the script I've got so far (separate .js file, referenced in index.html);
jQuery(document).ready(function($) {
"use strict";
function animateSec1BG() {
$('#section1').animate({
opacity: 0,
}, 1000, function () {
$("#section1").css({ 'background-image': 'url(images/SlideBG-1.jpg)' }).animate({ opacity: 1 }, 1000);
});
}
});
No errors are reported for that (Dreamweaver CC, code view). At the bottom of index.html, after all scripts are loaded, I have this;
<script type="text/javascript">
$("#section1").animateSec1BG();
</script>
(the "#section1" bit I don't think is needed - code just didn't 'look' right without it - but doesn't work either way!).
Error returned states:
TypeError: $(...).animateSec1BG is not a function
I'm totally lost and somewhat out of my depth here, so any pointers much appreciated!

The function is defined within jQuery scope not global. Add the function to jQuery like:
jQuery.fn.animateSec1BG = function() {
$('#section1').animate({
opacity: 0,
}, 1000, function() {
$("#section1").css({
'background-image': 'url(images/SlideBG-1.jpg)'
}).animate({
opacity: 1
}, 1000);
});
}
Since the selector is hard coded, you can just define the function global one, and execute it when ROM is ready.
function animateSec1BG() {
// code
}
And call it animateSec1BG(). As for the loop, you can call the function within a interval using setInterval()
setInterval(animateSec1BG, 1000);

Another solution with CSS animation;
(This animation change the back-color. If you want, replace the background-color element with background-image element)
$.fn.animateSec1BG = function (state){
if(state)
$('#section1').addClass("sample");
else
$('#section1').removeClass("sample");
};
$(document).ready(function() { $("#section1").animateSec1BG(true); });
.sample {
width:100px;
height:20px;
background:red;
animation:myfirst 1s;
-moz-animation:myfirst 1s infinite; /* Firefox */
-webkit-animation:myfirst 1s infinite; /* Safari and Chrome */
}
#-moz-keyframes myfirst /* Firefox */
{
0% {background:red;}
50% {background:yellow;}
100% {background:red;}
}
#-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {background:red;}
50% {background:yellow;}
100% {background:red;}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="section1">
Some info and etc.
</section>

ClearInterval() does not work on existing interval

I have written the following function for a school project, but the clearinterval() is not working. I have looked at several questions about the same problem and it was a problem with the scope most of the time.
However, I think my function uses a global variable, which should work. It doesn't, and I have no idea why. Please enlighten me.
HTML (actually part of a table with similiar rows)
<tr id="row35" data-uitval="1" class="">
<td>
<button type="button" id="knopje" class="tabeluur" data-uur="35" onclick="check(this)">
<p>✕</p>
</button>
</td>
<td> other cells... </td>
</tr>
Code (Javascript, in <head>-tag)
var fadingFunc;
var busy = false;
function check(uurID) {
if(busy) {
$('#foutmelding').html('Uw vorige bewerking loopt nog. Wacht totdat deze is afgelopen.')
} else {
uitval(uurID);
};
};
function uitval(uurID) {
// makes the button child (<p>) fade out and back in continuously
fadingFunc = window.setInterval(fadeBlink(uurID), 2000);
$.post(
'AnswerMe.php',
{
// send stuff
},
function(data) {
if(data === 'succes: uitval toegevoegd') {
window.clearInterval(fadingFunc);
// do stuff
} else if(data === 'succes: uitval verwijderd') {
window.clearInterval(fadingFunc);
// do stuff
} else {
window.clearInterval(fadingFunc);
// do stuff
};
}
);
};
Note 1: I stripped all the code that actually does something, since it is irrelevant for this question.
Note 2: I tested this on my computer (localhost, google chrome) and fadingFunc does hold a value in global scope (tested via console in developers mode)

So if I got it - you want the X inside the button to blink while the post request is waiting for the response.
Your code is almost there but you are not using the setInterval correctly and you are choosing a poor approach to achieve that. First we will fix your code and then check out my approach using a CSS animation.
To fix your code:
Code must be placed inside the <head> tag since you are using some inline call.
Remove all window. not needed - use setInterval( instead of window.setInterval.
When setting the actuall interval function wrap the target function with a function -setInterval(function(){ fadeBlink(uurID); }, 2000)
See It work: JSFIDDLE
The second approach which I think will be better for you is to add a class before the request and remove it when its done. the class obviuslly will be animated.
Second approach: JSFIDDLE
Second appraoch code:
JS
var busy = false;
function check(uurID) {
if(busy) $('#foutmelding').html('Uw vorige bewerking loopt nog.');
else uitval(uurID);
}
function uitval(uurID) {
$(uurID).addClass('blink');
busy = true;
$.post('http://fiddle.jshell.net/_display/',
{ test:'test' },
function() {
$(uurID).removeClass('blink');
busy = false;
}
);
}
CSS
.blink p {
-webkit-animation-name: blinker;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-moz-animation-name: blinker;
-moz-animation-duration: 1s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
animation-name: blinker;
animation-duration: 1s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
#-moz-keyframes blinker {
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}
#-webkit-keyframes blinker {
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}
#keyframes blinker {
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}

javascript or css to animate file transfer

I want to show a file transfer...like from a folder to another folder, i have been able to do it using JavaScript but all what i did was:
<script type="text/javascript">
var img;
var animateR;
var animateL;
function init(){
img = document.getElementById('file');
img.style.left = '35px';
}
function moveRight(){
img.style.display= 'block';
img.style.left = parseInt(img.style.left) + 10 + 'px';
animateR = setTimeout(moveRight,30);
if(parseInt(img.style.left)>600){
clearTimeout(animateR);
moveLeft();
}
}
function moveLeft(){
img.style.left = parseInt(img.style.left) - 10 + 'px';
animateL = setTimeout(moveLeft,30);
if(parseInt(img.style.left)<38){
clearTimeout(animateL);
moveRight();
}
}
window.onload =init;
</script>
this work for me but i wish to show the file rotating whilst moving from the right folder to the left folder and back to the riight fold while the file is uploading.
also i am think if the best way to go around this will be a gif?
i want an effect like flying files

You can rotate images in css like this :
#rot{
animation: anime1 2s;
-webkit-animation: anime1 2s;
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
}
#keyframes anime1 {
to {
-ms-transform: rotate(360deg); /* IE 9 */
-webkit-transform:rotate(360deg);/*Chrome & Opera*/
transform: rotate(360deg); /* The best browser (i mean firefox) */
}
}
#-webkit-keyframes anime1 {
to {
-ms-transform: rotate(360deg); /* IE 9 */
-webkit-transform:rotate(360deg);
transform: rotate(360deg);
}
}
Then just use js to display or hide animated image

If I have read your code correctly, you are making the file bounce back and forth between your right and left bounds. You could use the CSS3 transform property to rotate the files as they are moving back and forth as such.
transform:rotate(7deg);
-ms-transform:rotate(7deg); /* IE 9 */
-webkit-transform:rotate(7deg); /* Opera, Chrome, and Safari */
However, you are still just moving your image file in 10 pixel increments, which probably looks choppy. A better solution would be to use CSS keyframe animations.

Set the webkit-keyframes from/to parameter with JavaScript

Is there any way to set the from or to of a webkit-keyframe with JavaScript?

A solution of sorts:
var cssAnimation = document.createElement('style');
cssAnimation.type = 'text/css';
var rules = document.createTextNode('#-webkit-keyframes slider {'+
'from { left:100px; }'+
'80% { left:150px; }'+
'90% { left:160px; }'+
'to { left:150px; }'+
'}');
cssAnimation.appendChild(rules);
document.getElementsByTagName("head")[0].appendChild(cssAnimation);
Just adds a style definition to the header. Would be much cleaner/better to define it though the DOM if possible.
Edit: Error in Chrome with old method

You can use the CSS DOM interface. For instance:
<html>
<body>
<style>
#keyframes fadeout {
from { opacity:1; }
to { opacity:0; }
}
</style>
<script text="javascript">
var stylesheet = document.styleSheets[0];
var fadeOutRule = stylesheet.cssRules[0];
alert( fadeOutRule.name ); // alerts "fadeout"
var fadeOutRule_From = fadeOutRule.cssRules[0];
var fadeOutRule_To = fadeOutRule.cssRules[1];
alert( fadeOutRule_From.keyText ); // alerts "0%" ( and not "from" as you might expect)
alert( fadeOutRule_To.keyText ); // alerts "100%"
var fadeOutRule_To_Style = fadeOutRule_To.style;
alert( fadeOutRule_To_Style.cssText ); // alerts "opacity:0;"
fadeOutRule_To_Style.setProperty('color', 'red'); // add the style color:red
fadeOutRule_To_Style.removeProperty('opacity'); // remove the style opacity
alert( fadeOutRule_To_Style.cssText ); // alerts "color:red;"
</script>
</body>
</html>

This example covers several different browsers:
var keyFramePrefixes = ["-webkit-", "-o-", "-moz-", ""];
var keyFrames = [];
var textNode = null;
for (var i in keyFramePrefixes){
keyFrames = '#'+keyFramePrefixes[i]+'keyframes cloudsMove {'+
'from {'+keyFramePrefixes[i]+'transform: translate(0px,0px);}'+
'to {'+keyFramePrefixes[i]+'transform: translate(1440px'
'px,0px);}}';
textNode = document.createTextNode(keyFrames);
document.getElementsByTagName("style")[0].appendChild(textNode);
}

The way I handle this is to not set either the from or to of the element style I am manipulating in the css file and before triggering the animation I will set the element style that it should go to with javascript. This way you are free to dynamically manage what stuff should do until we can manage this directly in js. You only need to specify one of the two. The setTimeout allows the application of the css rule to the element before the animation is triggered otherwise you would have a race condition and it wouldn't animate.
#someDiv.slideIn {
-webkit-animation: slideIn 0.5s ease;
}
#-webkit-keyframes slideIn {
0% {
left:0px;
}
100% {}
}
var someDiv = document.getElementById('someDiv');
someDiv.style.left = '-50px';
setTimeout(function(){
someDiv.addClass('slideIn');
},0);

To solve this I added a 'webkit animation name' to my CSS selector and then created separate rules for my options, in my example red and yellow colouring:
.spinner {
-webkit-animation-name: spinnerColorRed;
}
#-webkit-keyframes spinnerColorRed {
from {
background-color: Black;
}
to {
background-color: Red;
}
}
#-webkit-keyframes spinnerColorYellow {
from {
background-color: Black;
}
to {
background-color: Yellow;
}
}
Then using jQuery:
$("#link").click(function(event) {
event.preventDefault();
$(".spinner").css("-webkit-animation-name", "spinnerColorYellow");
});

Yes, there is a way to do it dynamically with JavaScript. You can use css animation directives in native javascript code with the function Element.animate(). This approach is widely supported across browser, except for IE.
document.getElementById("tunnel").animate([
// keyframes
{ transform: 'translateY(0px)' },
{ transform: 'translateY(-300px)' }
], {
// timing options
duration: 1000,
iterations: Infinity
});
This function accepts two arguments - keyframes and options. Inside options you can specify the css animation parameters. Inside keyframes you can specify one or many transitional states. In your case with from and to you need two keyframes.