When I submit my form, the last function I have is:
$("#message").show().delay(5000).fadeOut();
This will show my thank you message for 5 seconds, and then fade the "message" div out.
I then tried adding this function below it:
$("#slide_panel").slideToggle("slow");
because I want the form (which is inside the #slide_panel div) to close / slide up AFTER the 5 second delay.... but when I add this function, its almost like the 5 second delay doesn't exist and the success message shows for about half a second and then the whole contact form dissapears as its supposed to.
What is wrong with my code?
$("#message").show().delay(5000).fadeOut();
$("#slide_panel").slideToggle("slow");
delay function applies only to animation queue. you can use the following code by passing a call back function to fadeOut()
$("#message").show().delay(5000).fadeOut('fast', function(){
$("#slide_panel").slideToggle("slow");
});
Now the slideToggle will run once the animation is completed.
You can update the code to the following ...
$("#message").show().delay(5000).fadeOut(function(){
$("#slide_panel").slideToggle("slow");
});
That is, add the slideToggle of SlidePanel in the message callback. For more ideas, check http://jsfiddle.net/sf2Nr/1/
This has to do with the asynchronous behavior of the animation functions in jQuery.
In order to activate the slideToggle after the fadeOut delay, you must call it from the fadeOut's callback function, i.e.:
$("#message").show().delay(5000).fadeOut(0, function() {
$("#slide_panel").slideToggle("slow");
});
Related
Simple question from a newbie:
How do I reset/restart a function after completing the time of (500
ms) in order to repeat the function each time I click on a specific
button?
FIRST PART OF THE CODE WORKS
my div is disappearing after 500ms fading out
$('.animate-this').click(function () {
$('p').show().delay(500).fadeOut();
});
SECOND PART IS MISSING
I would need to reset the fuction in order to repeated immediately...
I guess there is a very simple solution for that..
fadeOut accepts a callback function. You can use that
function animate() {
$('p').show().delay(500).fadeOut('slow', function() {
animate()
});
}
I have to hide some of subsections on click on button , here is the code
$('#myButton').on('click', function (event){
event.preventDefault();
$('#panel').hide();
$('#header').hide();
setTimeout(function(){ $('#sub-section').attr('style','display:none;'); }, 100);
});
at the last statements if I remove function set timeout then display attribute to none is not set on #sub-section . I just came to know about , what is actual need of settimeout here. It should work without settimeout also.
If function hide is taking too much time to execute , I have tried
$('#panel').attr('style','display:none;');
$('#header').attr('style','display:none;');
$('#sub-section').attr('style','display:none;');
also but it is not working. at 3rd statement only.
In this case display: none will be applied to your element after 100 milliseconds. I think this is done because above you have called hide function 2 times and this function will work with animation which will take some time. So your hide function will finish his in approximately less or equal to 100 milliseconds than display: none will be applied
i hope you will find your answer here. and also change the timing value and observe the output then you will understand.
[http://jsfiddle.net/mxgtaLzw/2/]
Without Function :
[http://jsfiddle.net/mxgtaLzw/3/]
I create this function for show div with function call , but i nedd execute this function and stop in one second after show :
<script>
function repit_clouds(request)
{
if (request=='no')
{
stop();
}
else
{
if (request=='ok')
{
var interval = setInterval(function() {
$("#header_sun").fadeIn(4000);
$("#header_sun").fadeOut(4000);
},10000);
}
}
}
$(document).ready(function()
{
$("#header_sun").fadeIn(4000).delay(4000).fadeOut(4000);
repit_clouds('ok');
$("#header_background_clouds").fadeOut(2000).css("display","#none");
$("#header_background_night").fadeIn(2000).css("background","#000").show(4000).fadeIn(2500);
repit_clouds('no');
});
</script>
The problem it´s with repit_clouds function , when i send the value no the function must stop , but no works fine and continue as if the request==ok , i don´t know why no stop
umm, what exactly do you think stop() does? Did you perhaps mean:
$('#header_sun').stop()
which would pause any existing animations on that element?
Or did you perhaps also want to stop the interval timer:
clearInterval(interval);
which of course also requires that interval be declared outside of the function so that its value isn't lost each time you call the function.
I note also that your .css() functions won't be queued by the .fadeOut() or .show() calls - .css() isn't an animation function so those changes will always happen immediately.
Likewise the two calls to repit_clouds() won't be queued either - if you expect those to be done after the previous animations then you need to investigate the jQuery .queue() function, or trigger them during "animation complete callbacks".
I would like to set the jQuery Isotope shuffle method to to perform an animated shuffle of the loaded DOM elements every 30 seconds that someone is on the page with the plugin loaded.
I have had success tying the animation to a .hover() event, but I cannot seem to get it to fire when I use setInterval() or .queue(). I want the animation to fire regardless of user interaction/input.
var iso_shuffle = function() {
$('#isotope').isotope('shuffle');
}
setInterval(iso_shuffle(), 2500);
Why does the previous code not trigger the randomization, yet this does:
$('#isotope').hover(function() {
iso_shuffle()
});
Cheers
iso_shuffle() calls the function immediately. The function returns nothing. So your setInterval is actually doing the equivalent of:
setInterval(undefined, 2500);
You want to use the function name as the callback for setInterval:
setInterval(iso_shuffle, 2500);
You need to pass the function itself, not its return value:
setInterval(iso_shuffle, 2500);
How do I fade in some text while a function is called and fade out when the function is done.
I have this:
$(".element").click(function() {
loadStuff($(this).text());
});
say i have another class element2 and i want it to display "Loading" while loadstuff is running and get out once its done..what's the simplest way to modify this code?
Here its something like that http://jsfiddle.net/damian_silvera/24BjA/
you can use anonymous callback in jquery ,look into this question
Call a function after previous function is complete