jQuery ajax, wait until beforeSend animation finishes
You can use a custom event to wait until the animation is complete, like this:
$("a").click(function(){
var img = $("img"),
div = $("div");
$.ajax({
url: "test.php",
contentType: "html",
beforeSend: function(){
img.fadeIn(600, function(){
div.append(" | beforeSend finished | ");
div.trigger("animationComplete");
});
},
error: function(){
if(img.is(':animated')) {
div.one("animationComplete", function() {
div.append(" | error | ");
});
} else {
div.append(" | error | ");
}
}
});
return false
});
Notes:
jQuery.one()
attaches an event handler that fires once and is then removed.jQuery.is(':animated')
is a custom selector provided by jQuery to determine if an element is animated using jQuery's built-in animation methods (egfadeIn
).
New jsFiddle: http://jsfiddle.net/pgjHx/
In the comments, Happy has asked how to handle multiple animations. One way would be to add a condition to the animationComplete
event handler to see if animation is ongoing. For example:
$("a").click(function(){
var img = $("img"),
div = $("div");
$.ajax({
url: "test.php",
contentType: "html",
beforeSend: function(){
img.fadeIn(600, function(){
div.append(" | beforeSend finished | ");
div.trigger("animationComplete");
});
// Add another animation just to demonstrate waiting for more than one animation
img.animate({
marginTop: '-=5',
opacity: '-=.5'
}, 700, function() {
div.trigger("animationComplete");
});
},
error: function(){
if(img.is(":animated")) {
// Note I've switched to bind, because it shouldn't be unbound
// until all animations complete
div.bind("animationComplete", function() {
if(img.is(":animated")) {
return;
}
div.append(" | error | ");
div.unbind("animationComplete");
});
} else {
div.append(" | error | ");
}
}
});
return false
});
Ajax wait for Animation to complete
Use the "complete" callback from the various animation functions :
complete Type: Function() A function to call once the animation is
complete
You could do something like this :
$('#myForm').fadeTo(0, 0.5, function() {
$("textarea").addClass('loading');
$("textarea").animate({backgroundPositionX: 0}, 1500, function() {
$('#myForm').ajaxForm({
data: {Ajax:'1'},
success: resultHANDLE
});
});
});
});
Animation effect before ajax call
You need to use callbacks. The provided solutions will work, but not necessarily sequentially. $.animate()
and $.ajax
both run asynchronously. If unfamiliar with this term, here's a good intro: http://code.tutsplus.com/tutorials/event-based-programming-what-async-has-over-sync--net-30027
Here's what I might do:
fetchAndInsert = function(href) {
$('#some-element').animate({'opacity':'0.0'}, 1000, function () {
$.ajax({
url: 'http://localhost:8000/phpexample/content/' + href.split('/').pop(),
method: 'GET',
cache: false,
success: function(data) {
content.html(data);
content.animate({'opacity':'1.0'}, 1000);
}
});
});
};
That will fade out whatever is currently in content
, fetch the new data, replace what's currently in content
, and then fade back in.
show loading before showing send result in jquery
you can do this by ajaxStart()
and ajaxComplete()
$("#loading").ajaxStart(function(){
$(this).show();
});
$("#loading").ajaxComplete(function(){
$(this).hide();
});
or
$.ajax({
url : dle_root + 'engine/ajax/fast.php',
data: { text: response, action: action },
beforeSend: function(){
$("#loading").show();
},
complete: function(){
$("#loading").hide();
},
success: function (data) {
if (data == 'ok') {
DLEalert(dle_p_send_ok, dle_info);
}
else { DLEalert(data, dle_info); }
});
});
How can I create a Please Wait, Loading... animation using jQuery?
You could do this various different ways. It could be a subtle as a small status on the page saying "Loading...", or as loud as an entire element graying out the page while the new data is loading. The approach I'm taking below will show you how to accomplish both methods.
The Setup
Let's start by getting us a nice "loading" animation from http://ajaxload.info
I'll be using
Let's create an element that we can show/hide anytime we're making an ajax request:
<div class="modal"><!-- Place at bottom of page --></div>
The CSS
Next let's give it some flair:
/* Start by setting display:none to make this hidden.
Then we position it in relation to the viewport window
with position:fixed. Width, height, top and left speak
for themselves. Background we set to 80% white with
our animation centered, and no-repeating */
.modal {
display: none;
position: fixed;
z-index: 1000;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgba( 255, 255, 255, .8 )
url('http://i.stack.imgur.com/FhHRx.gif')
50% 50%
no-repeat;
}
/* When the body has the loading class, we turn
the scrollbar off with overflow:hidden */
body.loading .modal {
overflow: hidden;
}
/* Anytime the body has the loading class, our
modal element will be visible */
body.loading .modal {
display: block;
}
And finally, the jQuery
Alright, on to the jQuery. This next part is actually really simple:
$body = $("body");
$(document).on({
ajaxStart: function() { $body.addClass("loading"); },
ajaxStop: function() { $body.removeClass("loading"); }
});
That's it! We're attaching some events to the body element anytime the ajaxStart
or ajaxStop
events are fired. When an ajax event starts, we add the "loading" class to the body. and when events are done, we remove the "loading" class from the body.
See it in action: http://jsfiddle.net/VpDUG/4952/
Related Topics
Custom CSS Properties, Why Not
Webview Methods on Same Thread Error
Add Page-Specific JavaScript or CSS in Joomla
Why Do Developers Append a Query String in JavaScript Files' Stylesheet Links
Animate CSS3 Gradient-Positions Using Jquery
Make Named Anchor Bookmarks Appear Always at Top of the Screen When Clicked
Amcharts - Line Chart Overflowing Graph Container
How to Change the Default Loading Tile Color in Leafletjs
Youtube API Not Working with iPad/Iphone/Non-Flash Device
CSS Overflow Hidden Increases Height of Container
Disable iPhone "Save Image" Popup
Disable Inertia Scroll for "Single-Page" Webapp
Opening an External Website in a Modal Popup
Find Next Cell Contained in Sibling Row with Queryselector