How to pause execution of javascript till jquery fade finishes - javascript

I want to do something like this
Fadein a div that covers some other div
change contents of that some other div
fadeout covering div and reveal that some other div below it.
Here is a code for that:
$pH('#coveringDiv').fadeIn(300);
//want to start doing something now, but only after above fadeIn finishes
adContainer = $pH(currAdBubble).find('.mcc');
$pH(adContainer).empty().html("some html");
$pH('.phAdScroller').attr('kw',keyword);
setTimeout("$pH('#coveringDiv').fadeOut(500);",300);
but what happens is, fadeIn and code written after that start together. i want code below fadeIn to start only after fadeIn finishes. I tried an empty setTimeout, but that didn't help as well. It would be too weird to put that code in a function and call it in setTimeout() as there will be a need to pass many arguments to that function. So how to achieve this ?

fadeIn takes a callback function that will execute after the fadeIn is complete:
$pH('#coveringDiv').fadeIn(300, function () {
//want to start doing something now, but only after above fadeIn finishes
adContainer = $pH(currAdBubble).find('.mcc');
$pH(adContainer).empty().html("some html");
$pH('.phAdScroller').attr('kw',keyword);
setTimeout("$pH('#coveringDiv').fadeOut(500);",300);
});
http://api.jquery.com/fadeIn/

Most timed functions in jquery support a callback, which gets called when the timed action completes. So...
$pH('#coveringDiv').fadeIn(, 300, function() {
... code to execute after the fade completes ...
});

Try this:
$pH('#coveringDiv').fadeIn(300, function() {
adContainer = $pH(currAdBubble).find('.mcc');
$pH(adContainer).empty().html("some html");
$pH('.phAdScroller').attr('kw',keyword);
setTimeout("$pH('#coveringDiv').fadeOut(500);",300);
});

The 2nd argument of fadeIn is a callback thats called when the animation completes, so;
$pH('#coveringDiv').fadeIn(300, anotherFuncName);
or
$pH('#coveringDiv').fadeIn(300, function() {
// code here
});

Add a pause for 500 seconds. or a loop countdown.

Related

How do I slideUp with animate as a function so that code waits until both events are done

I understand that in order for an even to happen 'after' a slideUp the following callback code can be used:
$('#something').slideUp('fast', function() {
... stuff to do after the slide is complete...
});
I want to achieve a slideUp with an animation to perform in the same way.
$('#something').slideUp().animate({opacity: 0,duration: 'fast'});
How do I transpose this code into a function that waits until both the slideup and the animation are complete before performing further code?
Something like this??
function animateAndExecute(functionToExecute) {
$('#something').slideUp().animate({opacity: 0,duration: 'fast'});
setTimeout(functionToExecute, 400) // Time taken to slide up. Use 600 if u use `slow` for animation duration.
}
and use it like
animateAndExecute(function() {
// Code to execute after sliding and animating
})

I want to execute one code after finish another code

I have write a jQuery CLICK event, in that event there are two codes which will be executed after click the event but I want to finish the first code execution first then after finish it start execution of the second code. But now they both are executing at the same time when the CLICK event is triggered.
The first code is about slideUp, so I want to complete the slideUp first then start the execution of second code. Here is the Fiddle
I have attached the code and image both here, please check and help me if you can.
$(".team-item-area").on('click', function(){
$(this).siblings().find('.team-item-right-para').slideUp();
$(this).find(".team-item-right-para").slideToggle(function(){
var check = $(this).is(":visible");
if(check == true)
{
$(this).parents('.team-item-area').siblings().find('img').hide();
$(this).parents('.team-item-area').find("img").fadeIn();
} else {
$(this).parents('.team-item-area').find("img").show();
$(this).parents('.team-item-area').siblings().find('img').fadeIn();
}
});
})[enter image description here][1]
According to the documentation the slideup function has a second argument that is the function that will be called once the animation is complete. The first argument is the duration of the slide. You can set as you want (400 is the default)
$(this).siblings().find('.team-item-right-para').slideUp(400, function {
... code to execute after the slide is complete...
});
Use slideToggle method inside this you can right anything after completing
http://api.jquery.com/slidetoggle/
Either use the solution #BenM mentioned or use somethin like this:
$(this).find(first operation)
.delay(1)
.queue(function (next) {
$(this).find(second operation);
next();
});

How can you execute a javascript function after another one is completed?

I want that a javascript function executes after another one is completed. This is my code:
$(window).load(function(){
$('#dvLoading').fadeOut(2000);
});
window.addLoadEvent = function() {
$('#popuprel1').show();
}
You want to use the callback for fadeOut. It calls the second function once the initial animation is complete.
See http://api.jquery.com/fadeOut/
Basically - you want to do something like this:
$(window).load(function(){
$('#dvLoading').fadeOut(2000, function() {
$('#popuprel1').show();
});
});
It's because the second onload replaces the first one. Follow this.
For multiple events on onload, use addLoadEvent

Fading Out an object a certain time after page load then running another set of code after fadeout

I am trying to take an object and have it fade out 5 seconds after the document is ready. Then I would like to have another set of functions fire, in my case one that starts adding and easing a set of blocks.
My major problem is the SetTimeout doesn't have a callback so I can't run something after it's done. And that the rest of the code runs when SetTimeout is running.
This is what I have now:
$(document).ready(function() {
setTimeout(function() {
$('#background-example').fadeOut(2000, function(){
});
}, 3000);
alert("Hello");
});
</script>
What this does is run a 2000ms fadeOut, 3000ms after the document is ready. However adding the alert, makes the alert run as soon as setTimeout starts because of it's property of not waiting.
Any suggestions would be great!
That empty function you put in there is a callback that is called after the animation completes. Just move your alert (or any other function call) inside.
setTimeout(function() {
$("#background-example").fadeOut(2000, function() {
alert("All done!");
});
}, 3000);

Problems with removing elements in jQuery

I am attempting to remove an object from a page with jQuery. I also want to animate the removal. The goal is to make the element fadeOut(), wait a second, then remove(). But it seems to refuse to wait to remove the element, even when I use it in a setTimeout() function. How can I make an element fadeOut(), and then remove() it?
$("button").click(function() {
$(this).fadeOut();
setTimeout(function() { $(this).remove();}, 1000);
});
Read manual carefully:
http://api.jquery.com/fadeOut/
The fadeOut() method has a callback that is invoked after the fadeOut completes. To use it:
$("button").click(function() {
$(this).fadeOut(function() { $(this).remove();});
});
There should be no reason to wait one second after the fadeOut completes, before removing the element, because the element will be invisible when it is removed.
In your timeout function, this isn't what you think it is - it's actually the global window object.
In any event (no pun intended) you should use a "completion callback":
$("button").click(function() {
$(this).fadeOut('slow', function() {
$(this).remove();
});
});
Never, ever, mix setTimeout and the animation queue. It's fine to interleave the two, i.e having a completion callback start a timer, or having a timer starting an animation, but it's never OK to assume that you can start both a 1000ms animation and a 1000ms timer and have them complete at the same time.
EDIT fixed code - no need for self in a completion callback, I was still thinking about setTimeout and this when I wrote that!
$('button').click(function(){
$(this).fadeOut(function(){$(this).remove()});
});​
DEMO
Why not just use the callback of fadeout?
$("button").click(function() {
$(this).fadeOut(function(){$(this).remove();});
});
try this one, maybe it helps:
$("button").click(function() {
(function(that) {
that.fadeOut();
setTimeout(function() {
that.remove();
}, 1000);
})($(this));
});

Categories