I'm trying to remove a div from the body AFTER an animation is completed, but at the moment looks like the remove happens right after the first iteration of the animation.
function $(el) { return document.getElementById(el); }
var divFirst = $('first');
if(divFirst)
divFirst.addEventListener("click", addSecond);
function removeSecond()
{
fadeOut();
var child = $('second');
console.log("remove called");
child.remove();
}
function addSecond()
{
console.log("addSecond called");
var aContainer = document.createElement('div');
aContainer.setAttribute('id', 'second');
aContainer.innerHTML = "Second";
aContainer.addEventListener("click", removeSecond);
document.body.appendChild(aContainer);
fadeIn();
}
function fadeIn()
{
var secondDiv = $('second');
if(secondDiv)
{
secondDiv.style.opacity ? secondDiv.style.opacity :
secondDiv.style.opacity = "0.0";
if(parseFloat(secondDiv.style.opacity) <= 1)
{
secondDiv.style.opacity = parseFloat(secondDiv.style.opacity) + 0.05;
setTimeout(fadeIn, 50);
}
}
}
function fadeOut()
{
var secondDiv = $('second');
if(secondDiv)
{
console.log(secondDiv.style.opacity);
if(parseFloat(secondDiv.style.opacity) >0 )
{
secondDiv.style.opacity = parseFloat(secondDiv.style.opacity) - 0.05;
setTimeout(fadeOut, 50);
}
}
}
Here the jsfiddle: http://jsfiddle.net/ny85ckk2/
If I remove the child.remove() call, the animation continues till the end.
Any idea?
Thanks a lot
Your fadeOut is an asynchronous operation. When you call it, it starts the fade, but then the fade continues and completes asynchronously because you're using setTimeout. So your code after callilng fadeOut runs just after it starts.
To remove the element when done, remove that code and instead remove the element in fadeOut when done:
function fadeOut()
{
var secondDiv = $('second');
if(secondDiv)
{
console.log(secondDiv.style.opacity);
if(parseFloat(secondDiv.style.opacity) >0 )
{
secondDiv.style.opacity = parseFloat(secondDiv.style.opacity) - 0.05;
setTimeout(fadeOut, 50);
}
else // Added
{ // Added
secondDiv.remove(); // Added
} // Added
}
}
Or if you want more flexibility, have fadeOut call a callback when done and remove the element in the callback; we do that by separating out the actual work of the fade from starting it:
function fadeOut(callback)
{
var secondDiv = $('second');
if (secondDiv)
{
doFade();
}
function doFade() {
if(parseFloat(secondDiv.style.opacity) >0 )
{
secondDiv.style.opacity = parseFloat(secondDiv.style.opacity) - 0.05;
setTimeout(doFade, 50);
}
else if (callback)
{
callback(secondDiv);
}
}
}
Usage:
function removeSecond()
{
fadeOut(function(div) {
div.remove();
});
}
Fiddle
Related
I have this code:
var next = null;
var outer = jQuery('.banner .container');
var current = outer.find('.banner-word:first');
current.fadeIn();
function fade() {
if (current.next('div.banner-word').length > 0) {
next = current.next('div.banner-word');
} else {
next = outer.find('.banner-word:first');
}
current.fadeOut();
next.fadeIn();
current = next;
setTimeout(fade, 11000);
}
// start the process
fade();
A few problems with it - 1) It seems to ignore the first banner-word div 2) On load it shows quickly shows the first 2 banner-word divs and then starts with the second banner-word div
Am I missing something obvious?
Try changing:
if (current.next('div.banner-word').length > 0) {
next = current.next('div.banner-word');
} else {
next = outer.find('.banner-word:first');
}
to:
if (current.next().is('div.banner-word')) {
next = current.next();
} else {
next = outer.find('.banner-word:first');
}
Edit:
try adding a delay to the initial fade() call.
Change
fade();
to
setTimeout(fade, 5000);
I am trying to make an image to fade out and then in. The problem is that when I use two functions, the image doesn't fade out but it immediately disappears. Is there anyone with amazing JavaScript skills to solve my problem?
Please do not tell me about jQuery because I already know how to do it using it, I only need to improve my JavaScript skills.
PS: I need also to understand why it doesn't work and how to make it work with as much details please.
Here is my code:
var el = document.getElementById("img1");
el.addEventListener("click", function() {
function fadeOut() {
el.style.opacity = 1;
function fade(){
var val = el.style.opacity;
if ((val -= .01) > 0){
el.style.opacity = val;
requestAnimationFrame(fade);
}
}
fade();
};
function fadeIn() {
el.style.opacity = 0;
function fade1() {
var val = el.style.opacity;
if ((val += .01) < 1){
el.style.opacity = val;
requestAnimationFrame(fade1);
}
}
fade1();
};
fadeIn();
fadeOut();
});
Thank you!
Still not the prettiest, but I have made just the minimum changes to your code to make it work: http://codepen.io/rlouie/pen/BzjZmK
First, you're assigning the opacity value back and forth repeatedly for no reason, which makes the code confusing to follow and also results in string concatenation instead of addition or subtraction, I have simplified this. Second, the functions were named the opposite of what they did, also confusing and fixed by me here. Finally, you ran both functions one after the other, so the second function set opacity to zero and then broke. Instead, I use a promise in your first function and resolve it when the animation completes.
That way the second function does not run until after the first one has completed animating.
var el = document.getElementById("img1");
el.addEventListener("click", function() {
function fadeOut() {
return new Promise(function (resolve, reject) {
let opacity = 1;
function fade(){
if ((opacity -= .01) > 0){
el.style.opacity = opacity;
requestAnimationFrame(fade);
} else {
resolve();
}
}
fade();
});
};
function fadeIn() {
let opacity = 0;
function fade1() {
if ((opacity += .01) < 1){
el.style.opacity = opacity;
requestAnimationFrame(fade1);
}
}
fade1();
};
fadeOut().then(fadeIn);
});
My proposal is:
start animation with fadein
when fadein finishes start the fadeout
var el = null;
function fadeIn(timestamp) {
var val = (+el.style.opacity == 0) ? 1 : +el.style.opacity;
if ((val -= .005) > 0) {
el.style.opacity = val;
window.requestAnimationFrame(fadeIn);
} else {
window.requestAnimationFrame(fadeOut);
}
}
function fadeOut(timestamp) {
var val = (+el.style.opacity == 0) ? 1 : +el.style.opacity;
if ((val += .005) < 1) {
el.style.opacity = val;
window.requestAnimationFrame(fadeOut);
}
};
window.onload = function () {
el = document.getElementById('img1');
el.addEventListener('click', function(e) {
window.requestAnimationFrame(fadeIn);
});
}
<img id="img1" src="http://www.loc.gov/pictures/static/data/highsm/banner.jpg">
Voor de fade in:
Function FadeIn() {
var milli = 3000; //duration
el = yourelement;
el.style.opacity = 1;
var a = 1 / (milli / 1000 * 16); //the -x
FadeIn_loop(a);
}
Function FadeIn_loop(a) {
if (el.style.opacity > 0.01) {
el.style.opacity = el.style.opacity - a;
setTimeout("FadeIn(" + el + ")", 16); //about 1/60 a second
} else {
el.style.opacity = 0;
}
}
Same thing for fade out, succes!
In your code are many things that does'nt seem to be right. First of get all those functions out of each other otherwise requestAnimationframe cant find the functions.
I have a div item in table, i am rotating the div in JS and i am calling the function repeatedly, but the flip happens only for first time when the function is executed and again when function is called it just shows the div, without flipping the div.
The thing what i need is, when each time i call the function the div should flip the div.
How can i do that?
Css:
.box-1{
transform: rotateY(180deg);
display:none;
}
JQuery:
function startSlidecat1(started) {
for (var i = 0; i < footwear.length; i++) {
var image = footwear[i][0];
imgslidercat1(image, i * 2100, i == footwear.length - 1);
}
};
function imgslidercat1(image, timeout, last) {
window.setTimeout(function() {
document.getElementById('flip-1').style.display = 'none';
document.getElementById('category-1').style.display = 'block';
document.getElementById('category-1').innerHTML = "";
var product = document.getElementById('category-1');
var elem = document.createElement("img");
product.appendChild(elem);
elem.src = image;
if (last) {
flip();
}
}, timeout);
}
startSlidecat1();
function flip(){
$('#category-1').delay(100).css('display', 'none');
$('.box-1').delay(100).css('display', 'block');
$('.box-1').transition({
perspective: '100px',
rotateY: '360deg'
},200)
setTimeout(startSlidecat1, 2000);
}
The first time when div is flipping, its rotateY value changes from 180deg to 360deg, that is visible. But from second time onward, its value remains at 360deg so nothing happens. You just need to reset the value each time you call the function like this,
$('.box-1').css({transform:'perspective(100px) rotateY(180deg)'});
You can include this inside the startSlidecat1 function like this,
function startSlidecat1(started) {
$('.box-1').css({transform:'perspective(100px) rotateY(180deg)'});
for (var i = 0; i < footwear.length; i++) {
var image = footwear[i][0];
imgslidercat1(image, i * 2100, i == footwear.length - 1);
}
};
How can I pause/break this loop when 'delay' and 'animation' inside it are running and continue it from the break place after 'animation' is done in order to prevent the 'i' variable from being overwritten?
Or maybe there are another ways to prevent the 'i' variable from overwriting during animation?
for(i=0;i<inputs.length;i++){
var now = inputs[i];
var top = inputs[i].attr('top');
if(!now.val()){
if(dialog.css('display')=='none'){
now.addClass('style');
dialog.css('top',top).fadeIn(200);
}
else {
dialog.delay(300).animate({"top": top}, 500, function(){
now.addClass('style');
});
}
}
else{
now.removeClass('style');
}
}
I can't put adding Class before delay and animation as I need to add Class with delay and after animation is done.
by recalling same function till all element animation complete.
var i = 0;
function animate() {
if (inputs.length == i) {
return;
}
var now = inputs[i];
var top = inputs[i].attr('top');
if (!now.val()) {
if (dialog.css('display') == 'none') {
now.addClass('style');
dialog.css('top', top).fadeIn(200, function(){
animate(); // recall it after fadein
});
} else {
dialog.delay(300).animate({
"top": top
}, 500, function () {
now.addClass('style');
animate();// recall it after animate complete
});
}
} else {
now.removeClass('style');
}
i++;
}
animate();
So I made this function and it works:
var opacity = 9;
function func() {
$("action").style.opacity = "0." + opacity;
opacity--;
if (opacity == -1) { window.clearInterval(fading); }
}
var fading = window.setInterval("func()", 200);
But thats acutally not really one single function.
So I did this:
function fadeOut(ms) {
var opacity = 9;
function func() {
$("action").style.opacity = "0." + opacity;
opacity--;
if (opacity == -1) { window.clearInterval(fading); }
}
var fading = window.setInterval("func()", ms);
}
fadeOut(200);
And suddenly func() is undefined.
Help ? :|
Change:
var fading = window.setInterval("func()", ms);
to
var fading = window.setInterval(func, ms);
Am not sure what $("action") return though, if its jQuery then style is not a valid member of $("action").