Content load only after fadeOut - javascript

I am trying to load content in between fadeOut and fadeIn.
If I try to run the following code the content loads before the fadeOut finishes:
$("#contentArea").fadeOut(1000);
$("#contentArea").promise().done();
$("#contentArea").load(content_map[$(this).attr('id')]);
$("#contentArea").fadeIn(1000);
I have tried to put a callback function in the fadeOut but still, the load inside that callback was called early. I tried to add a setTimeout after the fadeOut and it still didn't work.
I added the promise function (which is critical apparently), with or without a callback function holding the follow-up actions, but it did not work.
I will be happy to know how best to achieve this effect and if someone can also give me a tip as to why my other attempts failed it will be a wonderful bonus :)

The callback function should work, so I suspect you did it wrong. It should be:
$("#contentArea").fadeOut(1000, function() {
$(this).load(content_map[this.id], function() {
$(this).fadeIn(1000);
});
});

Related

fadeOut() callback completes before fading is done

I am working on a font-test page that should switch the font of the header and paragraph tags on click. Which works fine but the experience is really jarring so I want to smooth it out with the following path:
fadeout -> do the font swap -> fade in
But the code runs the font swap first, then the animation.
I have the following code snippet, I am only including the jQuery because it's the root cause of my problem.
// Anytime a card is clicked
$('.card').click(function(){
// Call card by id and switch the fonts
var id = "#" + this.parentElement.id;
$(this).fadeOut(900,swapFont(id));
$(this).fadeIn(500);
// attach the above to some sort of transition callback
});
// Function to swap the font around so that the header is now the body font and the body font is now the header font
function swapFont(id) {
// font-swap logic in here which works fine
}
The issue is because the fadeOut() animation is (effectively) asynchronous. This means the next statement will be evaluated while the animation is in progress - hence the behaviour you're seeing. To fix this you need to use the callback pattern that the fadeX() methods provide.
Also, you're passing the result of the immediate execution of swapFont() to the callback, instead of a function reference to run when the event occurs. Try this:
$('.card').click(function(){
var id = "#" + this.parentElement.id;
$(this).fadeOut(900, function() {
swapFont(id);
$(this).fadeIn(500);
});
});
You are currently passing the result of the swapFont() call, instead you need to point to the function itself.
So this:
$(this).fadeOut(900,swapFont(id));
is the same as:
var x = swapFont(id);
$(this).fadeOut(900, x);
Easiest way is to wrap it in an anonymous function:
$(this).fadeOut(900, function() { swapFont(id) });
Edit:
The fadeIn will also execute before the fadeOut has completed. You can add a .delay or, better, call the fadeIn in the callback as per Rory's answer (so I won't repeat here).

jQuery slideDown on load

I am loading a a partialView using ASP.NET MVC in my jQuery code. The partialView contains some explanation about the item that is clicked in my click function, and I would like the explanation to slide down once the object is "loaded".
I have the following code:
$('.details').click(function(){
$('#details').load($(this).data('url'), { id: $(this).data('id')}).slideDown('slow');
//the slidedown part doesn't seem to work.
});
But the .slideDown() doesn't seem to work. How can I got about this? Should I use .animate() instead?
Thanks!
EDIT
I found some questions saying I might need to .hide() it first. This seems to work, however it seems the "element" is not completely loaded when it slides down as some of the text updates after finishing the .load().
Is there some way to run the .slideDown() once the load finishes?
It's just because $().load() is not immediate. There is a third parameter that is a callback than runs when load is complete, so, you need to await to slide down (not tested, sorry).
Can you try this?
$('#details').load($(this).data('url'), { id: $(this).data('id')}, function() { $(this).slideDown('slow'); });
and tell us if it works.

Wait an animation in jQuery

I want to execute something when an animation finishes, so i tried to use jQuery's function promise(), this is what i have:
$(".title").fadeOut("fast");
$(".title").promise().done(function() {
$("#area").fadeIn("fast");
);
Unfortunately, it doesn't works and chrome javascript tool says that promise() is not a function...
Another thing i tried was
$(".title").fadeOut("fast", function(){
$("#area").fadeIn("fast");
});
But it doesn't work too... any idea?
Thanks
You can do it using the callback function of JQuery.
Let's say you have 2 div; one is displaying and the other one is hidden at the beginning like below;
<div style="width:50px;height:50px;background-color:black;" id="Div1"></div>
<div style="width:50px;height:50px;background-color:blue;display:none;" id="Div2"></div>
You can wait first one to fadeout and than fadein the second one with the code below.
$("#Div1").fadeOut(2000, function(){
$("#Div2").fadeIn(2000);
});
Here is also JSFiddle sample Jquery Animation Callback
I hope this helps.
Edit: Modified code for several elements with same class. https://jsfiddle.net/eaktas/3wuter03/4/
it should work, probably you just cant notice that because of fast animation. try with
$('#area').fadeOut(3000, function(){console.log('3s passed')})
You need to chain the promise to the back of the other animation.
$(".title").fadeOut("fast").promise().done(function() {
$("#area").fadeIn("fast");
});
see fiddle here https://jsfiddle.net/9b82s6ah/

JQuery AJAX success + fadeIn

I'm using AJAX to load survey content into a container on a page, and during the transition, I fadeOut the container and fadeIn when it's done. It works fine for pages 1-4, but stops working for page 5. The content loads for page 5, but the container doesn't fadeIn.
success: function(data){
$("div#surveyContainer").fadeOut(function(){
$("div#surveyContainer").html(data).hide().fadeIn();
}); // end fadeout
}
There is no reference to surveyContainer anywhere in page 5. All I can think of is that something is timing out causing the fadeIn to not get triggered. The load time is about 36ms. I set the php script to where it's sending data to report all errors (and the data is making it into the Db just fine), but all I'm getting is the content I expect, but the container stays display:none. If I remove the fades, everything works fine :/
I've also tried this to no avail:
success: function(data){
$("div#surveyContainer").fadeOut(function(){
$("div#surveyContainer").html(data);
$("div#surveyContainer").fadeIn();
}); // end fadeout
}
Try adding a .stop(); see reference here
success: function(data){
$("div#surveyContainer").fadeOut(function(){
$(this).html(data).stop(true, true).fadeIn();
}); // end fadeout
}
This should stop any animations that are currently happening, force them to go straight to their ending point (where they were animating to) and clear the animation queue. You can probably get rid of the hide() this way too.
Also, you can just use this inside the callback for, well, I dont' know why. but you can.
Not sure why it would break on a individual page tho.
Perhaps you could try it in the callback of .hide():
$("div#surveyContainer").html(data).hide('slow', function(){
$(this).fadeIn();
});
As Interstellar_Coder pointed out. You have already hidden the div#surveyContainer when you faded it out. You now just need to load up your data and fade it in.
success: function(data){
$("div#surveyContainer").fadeOut(function(){
$(this).html(data).fadeIn(); // Removed the .hide()
}); // end fadeout
}
Don't link to http://code.jquery.com/jquery-latest.js from a page using encryption (HTTPS). Host the code locally.

jQuery on page load sequential loading of elements

I'd like to know how this effect (http://www.getflow.com/) is achieved.
I'm guessing that it's using jQuery to sequentially change the opacity of each element.
Could anyone post a quick snippet of js to make this happen (load in each image, one every 3 seconds)
http://jsfiddle.net/5hdcz/2/
Thanks!
Use the fadeIn callback functions:
$('#img1').fadeIn('slow', function() {
$('#img2').fadeIn('slow', function() {
// and so on...
});
});

Categories

Resources