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/
Related
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);
});
});
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.
I've got this simple js.erb file with jQuery:
$('.hey-popup').empty().hide().append('<div>Hey Ho!</div>').fadeIn('500');
Problem: The appropriate DOM elements are getting appended to the correct div, but somehow the fadeIn doesn't work correctly.Instead of just hiding the div, appending the DOM elements and then fading it in, it appears to append first, then to fadeOut and then to immediately fadeIn again.What is going on?
Only number, not string
.fadeIn(500);
From other example
$(document).ready(function(){
$("button").click(function(){
$("#div1").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
});
https://jsfiddle.net/L2xewbea/
jQuery always work with
$(document).ready(function(){
working example
$(document).ready(function(){
$('.hey-popup').empty().hide().append('<div>Hey Ho!</div>').fadeIn('500');
})
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<div class="hey-popup">my name is name</div>
Donald Wu is correct, the parameter needs to be a number not a string.
If you want to have a little more control of the sequence you can use the callback functions that the API provides - these will get executed when the effect (hide etc) is complete. For example:
$('.hey-popup').empty().hide(500, function() {
$(this).append('<div>Hey Ho!</div>').show(500);
});
https://jsbin.com/hucaba/edit?html,js,output
I downloaded the jQuery plugin letter-fx (http://tuxsudo.com/code/project/letterfx) and really like what it can do.
However, on my landing page I'm trying to make the different paragraphs appear in sequence. I thought the best way to do that is to delay each paragraph with setTimeout()
I'm a JS/jQuery novice and hoping someone can help me out. Here's the code I have thus far:
$(function(fx1){
$(".fx1").letterfx({"fx":"fade","backwards":false,"timing":50,"fx_duration":"1000ms","letter_end":"restore","element_end":"stay"});
});
$(function(){
setTimeout(fx1,3000);
});
Can anyone show me what I'm doing wrong? Thanks!
Try below code. To use setTimeout you need to pass a function as first param.
$(function(){
var applyAnimation = function(){
$(".fx1").letterfx({"fx":"fade","backwards":false,"timing":50,"fx_duration":"1000ms","letter_end":"restore","element_end":"stay"});
};
setTimeout(applyAnimation,3000);
});
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...
});
});