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();
});
Related
I have the following problem: I want something to happen after two elements have been faded out. They are supposed to fade out at the same time:
$("#publish-left, #publish-right, #print-run").fadeOut(function(){
//do something
});
However this doesn't seem to do what I want. How do I get my script to fade out two elements and then do something?
Edit: I just noticed there is something special about what I want to do. I don't always know if all elements are visible. So sometimes not all elements will be faded out, only some. However since some elements are already faded out, this will cause the function to trigger immediately I believe.
http://jsfiddle.net/k6yg319o/
Try the example, it should work. Just make sure the DOM is ready!
$(function() {
$('#test1, #test2, #test3').fadeOut(function() {
$('#test3').show();
})
});
you can use callback function,
$("#publish-left, #publish-right").fadeOut("slow", function(){
//call back function executes are faded out
//do something
});
Check the docs for fadeOut.
.fadeOut( [duration ] [, complete ] )
First parameter takes a duration, second is a callback function to execute after fadeOut is complete.
$("#publish-left, #publish-right").fadeOut(1000, function() {
document.body.style.backgroundColor = 'blue'
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="publish-left">Left</div>
<div id="publish-left">Right</div>
Fade out both elements, then turn blue.
You could just run the first fade without the callback and run the second one with the callback if they are both fading at the same speed.
Here's a fiddle.
$("#publish-left").fadeOut();
$("#publish-right").fadeOut(function () {
alert("both fades finished since both fade at the same rate.");
});
Or if you want to use separate speeds you could flip a switch when each one is finished and then run the callback when the second one finishes.
Here's a fiddle.
var faded1 = false;
var faded2 = false;
var callback = function(){ alert("both fades finished"); };
$("#publish-left").fadeOut(function(){
faded1 = true;
if(faded1 && faded2) callback();
});
$("#publish-right").fadeOut(function(){
faded2 = true;
if(faded1 && faded2) callback();
});
Edit..
after reading your comment..
Or if one of them may already be hidden, you could just check to see if they're both hidden in your callback function..
Here's another fiddle
var callback = function(){
// If either element is still visible, don't do anything.
if($("#publish-left").is(":visible") || $("#publish-right").is(":visible")) return;
// Otherwise, do something
alert("both are hidden now");
};
// let's hide the first one right away for testing
$("#publish-right").hide();
$("#publish-left").fadeOut(callback);
$("#publish-right").fadeOut(callback);
I need a solution for my problem.
I need to execute if any rule matches with jquery click, and execute general match.
For example;
I have multiple elements like a.option.
So:
$(function(){
$('a.option').click(function(){
//do something
});
});
But, i have some exceptions like a.option.model.
So:
$(function(){
$('a.option.model').click(function(){
//do this first;
});
$('a.option').click(function(){
//go here after first one in finished!
});
});
I don't want to make statement in general click function...
How can i do this?
This should work
$(function(){
$('a.option').click(function(){
// code called first for both cases goes here
if($(this).hasClass('model')) {
// code called only for .model goes here
}
});
});
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
Is there anyway to wait for a jQuery animation to finish before proceeding with another command?
For example, I want to fade out/slide up an element, change some items within the element and then fade them back in/slide back down.
If I put the statements one after another, you can see the items change before the animation completes.
$('#item').fadeOut();
$('#item').html('Changed item');
$('#item').fadeIn();
Thanks.
You can pass callback in fadeIn/fadeOut. jQuery docs
$('#item').fadeOut('slow', function(){
$('#item').html('Changed item');
$('#item').fadeIn();
});
You can either use the callback method which gets called from .fadeOut, like
$('#item').fadeOut('fast', function() {
$(this).html('Changed item').fadeIn();
});
or use the underlaying Deferred object
$('#item').fadeOut('slow').promise().done(function() {
$(this).html('Changed item').fadeIn();
});
Pass a callback function to fadeOut.
$("#item").fadeOut(function() {
$(this).html("changed").fadeIn();
});
This is the sort of thing you'll learn in a basic jQuery tutorial.
$('#item').fadeOut('slow', function() { // do your stuff here });
For more info: http://docs.jquery.com/Effects/fadeOut#speedcallback
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.