We Keep Coding

Animation complete not called JavaScript DOM

I am trying to animate an image with a completion function. The animation works fine but the complete property is not called. I tried looking around and didn't find any result on the matter that says that what i'm doing is wrong. I tried on Chrome and Firefox I am using the code below
document.getElementById("myImageId").animate([{
transform: 'translateY(0px)'
},
{
transform: 'translateY(-300px)'
}
], {
duration: 300,
complete: function () {
alert('end ani')
}
});

Element.animate() returns a Animation object, and you can attach an event handler for finish to the object:
var animation = document.querySelector('#myImageId').animate([{
transform: 'translateY(0px)'
},
{
transform: 'translateY(-300px)'
}
], {
duration: 300,
delay: 300,
fill: 'forwards',
});
animation.addEventListener('finish', () => alert('end ani'));
<div id="myImageId"><img src="https://picsum.photos/200"></div>
Another option, which is only supported by FireFox currently, is the Animation.finished promise:
var animation = document.querySelector('#myImageId').animate([{
transform: 'translateY(0px)'
},
{
transform: 'translateY(-300px)'
}
], {
duration: 300,
delay: 300,
fill: 'forwards',
});
animation.finished.then(() => alert('end ani'));
<div id="myImageId"><img src="https://picsum.photos/200"></div>

jQuery animations step by step

I have a small problem on my jQuery animation.
I want a button which change the width of a div from 100% to 72.5%. Next to this div could be another div which could fill the rest space (width 22.5%, 5% margin)
It could do following things step by step:
Div 1 get a border
div 1 change his width
div 2 get opacity and change his width
Here is my code:
var hidden = true;
function openEditMenu(){
var em = document.getElementById("editMenu");
var rf = document.getElementById("reportField");
if(hidden){
$({alpha:0}).animate({alpha:1}, {
duration: 1500,
step: function(){
rf.style.border ="1px solid rgba(0,0,0,"+this.alpha+")";
}
});
$("#editMenu").css({opacity: 0.0, visibility: "visible"}).animate({opacity: 1.0},1000);
$(em).animate({width: "22.5%"},{ duration: 1000, queue: false });
$(rf).animate({width: "72.5%"},{ duration: 1000, queue: false });
$(rf).animate({marginRight: "5%"},{ duration: 1000, queue: false });
}
else{
$({alpha:1}).animate({alpha:0}, {
duration: 1000,
step: function(){
rf.style.border ="1px solid rgba(0,0,0,"+this.alpha+")";
}
});
$(em).animate({width: "0%"},{ duration: 1000, queue: false });
$(rf).animate({width: "100%"},{ duration: 1000 });
$(rf).animate({marginRight: "0%"},{ duration: 1000, queue: false });
$("#editMenu").css({opacity: 1.0, visibility: "visible"}).animate({opacity: 0.0},1000);
}
hidden = !hidden;
}
Like you can see in the example now everything happens on the same time. But I want that everything works step by step.
var hidden = true;
function openEditMenu() {
var em = document.getElementById("editMenu");
var rf = document.getElementById("reportField");
if (hidden) {
$({
alpha: 0
}).animate({
alpha: 1
}, {
duration: 1500,
step: function() {
rf.style.border = "1px solid rgba(0,0,0," + this.alpha + ")";
}
});
$("#editMenu").css({
opacity: 0.0,
visibility: "visible"
}).animate({
opacity: 1.0
}, 1000);
$(em).animate({
width: "22.5%"
}, {
duration: 1000,
queue: false
});
$(rf).animate({
width: "72.5%"
}, {
duration: 1000,
queue: false
});
$(rf).animate({
marginRight: "5%"
}, {
duration: 1000,
queue: false
});
} else {
$({
alpha: 1
}).animate({
alpha: 0
}, {
duration: 1000,
step: function() {
rf.style.border = "1px solid rgba(0,0,0," + this.alpha + ")";
}
});
$(em).animate({
width: "0%"
}, {
duration: 1000,
queue: false
});
$(rf).animate({
width: "100%"
}, {
duration: 1000
});
$(rf).animate({
marginRight: "0%"
}, {
duration: 1000,
queue: false
});
$("#editMenu").css({
opacity: 1.0,
visibility: "visible"
}).animate({
opacity: 0.0
}, 1000);
}
hidden = !hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="display:inline-flex;width:100%;">
<div id="reportField" style="width:100%; height:50px; background-color:blue;">
a
</div>
<div id="editMenu" style="width:0%; height:50px; background-color:red; visibility: hidden;">
b
</div>
</div>
<button onclick="openEditMenu()">
</button>
I know this solution:
$('#id').animate(
{ left: new value },
duration, function() {
// Animation complete.
});
But it doesnt works on my alpha animation.

Web animations API callback function

I've just discovered the Web Animations API, and I'm trying to figure out how to introduce a callback function for these animations..I've tried using the following
$('.box_wrapper')[0].animate([
{ right: '-100%' },
{ right: 0 }
], {
fill: 'forwards',
duration: 1000,
onfinish: function() {
// do stuff
}
});
Looking at the w3c spec on this section I thought that the onfinish property is what I'd need to use, but nothing happens.
I've also tried using the jQuery callback syntax;
$('.box_wrapper')[0].animate([
{ right: '-100%' },
{ right: 0 },
], {
fill: 'forwards',
duration: 1000
}, function() {
// do stuff
});
But of course this doesn't work either. Any Ideas, I'm sure it's something simple, I've just not been able to find the info yet.

I nearly had it right, with a small tweak like so, the callback works;
$('.box_wrapper')[0].animate([
{ right: '-100%' },
{ right: 0 }
], {
fill: 'forwards',
duration: 1000
}).onfinish = function() {
// do stuff
};

creating an array and looping through it in javascript/jquery

I created an array. I want to push things into the array and when I click on "pic2" have it run the "runShadow" function... I want the function to make visible any of the objects that have been pushed into the array:
<script type="text/javascript">
$(document).ready(function () {
var shadowArray = [];
function runShadow() { // jquery- ".each"? look this up in stackoverflow!
console.log("functionWorking!");
for (var i = 0; i < shadowArray.length; i++) {
shadowArray[i].animate({
opacity: 1
}, 1500, "linear");
}
}
$("#pic1a").click(function () {
$('#pic2').fadeIn(1500);
$('#pic1').animate({
top: -100,
left: -1000
}, 1500, "linear");
$('#pic1a').animate({
opacity: 0
}, 1500, "linear");
$('#pic1b').animate({
opacity: 0
}, 1500, "linear");
$('#pic1c').animate({
opacity: 0
}, 1500, "linear");
$('#pic1d').animate({
opacity: 0
}, 1500, "linear");
$('#pic1e').animate({
opacity: 0
}, 1500, "linear");
$('#pic1f').animate({
opacity: 0
}, 1500, "linear");
shadowArray.push("pic1a");
console.log(shadowArray);
console.log("WORKING!");
});
$("#pic2").click(function () {
$('#pic2').fadeOut(1500);
$('#pic1').animate({
top: -770,
left: -800
}, 1500, "linear");
runShadow();
});
});
</script>

try
$("#"+shadowArray[i]).animate(...)

Strange jquery animation behavior

The website uses a "black opacity" filter made with this:
/* Body black hover */
$(document).ready(function() {
$("#bg_hover").stop();
$("#bg_hover").animate({ opacity: 0.5 }, 1000);
$("body").hover(function() {
$("#bg_hover").stop();
$("#bg_hover").animate({ opacity: 0.5 }, 1000);
}, function( ) {
$("#bg_hover").stop();
$("#bg_hover").animate({ opacity: 0 }, 1000);
});
});
The problem I have is that I wanted to make a little animation when the user enters to "SOBRE NOSALTRES" (click upper menu to enter the page).
As you can see it animates "well" but not at all, sometimes if you go to "PRODUCTES" and back to "SOBRE NOSALTRES" the animation get's stuck at 98% width. It's kind of strange, why does it happens?
here it's a screenshot of the error:
http://webkunst.comeze.com/test/3.png
and this is the script i'm using to make the animation on NOSALTRES page:
<script>
$(document).ready(function() {
$("#bg_hover").stop();
$("#bg_hover").animate({ width: '80%', opacity: 0.9, left: '10%', right: '10%' }, 800);
$('li#nosaltres').addClass('active')
});
$("body").hover(function() {
$("#bg_hover").stop();
$("#bg_hover").animate({ opacity: 0.9 }, 500);
}, function( ) {
$("#bg_hover").stop();
$("#bg_hover").animate({ opacity: 0 }, 500);
});
</script>

The problem occurs when you hover in the <body> when the PRODUCTES page is loading since you call $("#bg_hover").stop(); in the first line of $("body").hover(function() {}); which stops all animation, including the animation that is reducing the width to 80%.
I can reproduce the problem by clicking on SOBRE NOSALTRES, then moving the mouse to the in and out of the browser window quickly.
I would not add the hover effect to the <body> until the initial resizing to 80% is finished, for example by adding an anonymous function to call once the animation is complete.
$("#bg_hover").stop().animate({ width: '80%', opacity: 0.9, left: '10%', right: '10%' }, 800, function() {
$('li#nosaltres').addClass('active');
$("body").hover(function() {
$("#bg_hover").stop().animate({ opacity: 0.9 }, 500);
}, function( ) {
$("#bg_hover").stop().animate({ opacity: 0 }, 500);
});
});

Dont split it into two lines:\
$("#bg_hover").stop();
$("#bg_hover").animate({ width: '80%', opacity: 0.9, left: '10%', right: '10%' }, 800);
Instead, use:
$("#bg_hover").stop().animate({ width: '80%', opacity: 0.9, left: '10%', right: '10%' }, 800);