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
Related
I'm using click event to execute some code. And after execute the click function code, want to execute another function or code like a callback function. But have struct to call function after the click function.
var $body = jQuery('body');
$body.on('click', '.modal_popup_btn', function() {
var $data_type = jQuery(this).attr('data-popup-link');
jQuery('.modal_wrapper[data-popup="'+ $data_type +'"]').removeClass('modal_closed').addClass('modal_opened');
jQuery('.modal_wrapper[data-popup="'+ $data_type +'"]').find('.modal_container').removeClass('modal_container_closed').addClass('modal_container_opened');
setTimeout(function() {
hiddenBodyScrollWithPadding();
}, 550);
});
Here is the code, need to call 'hiddenBodyScrollWithPadding()' after the click code execute. Here used setTimeout to execute before code. But setTimeout is a bad idea to this situation. Can anyone have another idea to execute this function in a better way?
If your '.modal_wrapper' animating, then add this jQuery Code.. Your Popup modal will listen transition event is ended then check if Modal has .modal_opened class. If transition has been ended and hasClass condition is true then your custom function will be executed.
jQuery('.modal_wrapper').on('transitionend', function(event) {
event.preventDefault();
if(jQuery(this).hasClass('modal_opened')){
hiddenBodyScrollWithPadding();
}
});
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();
});
I'm using this script to execute two actions.
It's a toggle for #mobileJ and #botaojs but they aren't executing at the same time; I would like to make both actions happen together.
$(document).ready(function(){
$("#namala").click(function(){
$("#mobileJ").toggle(function () {
$("#botaojs").toggleClass("toggleclass");
});
});
});
The callback function for .toggle() happens after it's complete, not at the same time. In order for both to happen simultaneously (at least observed simultaneously, though there's likely some millisecond-delay), don't use the callback. Just execute them both:
$("#mobileJ").toggle();
$("#botaojs").toggleClass("toggleclass");
Don't put the second action in a callback
<!-- Script Jquery -->
<script>
$(document).ready(function(){
$("#namala").click(function(){
$("#botaojs").toggleClass("toggleclass");
$("#mobileJ").toggle();
});
});
</script>
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.