I have the following JQuery code
$("#classparent").click(function () {
$(".classsubitems").slideToggle('slow', function () {
});
});
I need to let JQuery run some code at begin and end of animation.
Is this possible?
Thank you
Simple enough.
$("#classparent").click(function () {
// before start of animation code here
$(".classsubitems").slideToggle('slow', function () {
// end of animation code here in the callback
});
});
The code you want to execute before the animation you can place before the slideToggle method. The code you want to execute after the animation you can place in the callback function.
SlideToggle has a callback-function (it looks like you already have provided that?)
http://api.jquery.com/slideToggle/
For the code to be executed before the animation: the easies way to do this is simply calling it before the line with $(".classsubitems").
SlideToggle doesn't have callback method to call at the beggining but it is possible when completes.
$("#classparent").click(function () {
//Code to call before animation starts
$(".classsubitems").slideToggle('slow', function () {
//code to execute after the animation finish.
}); });
Related
I have a simple .click() function with some functions in it:
$mario.on('click', this, function() {
var width_mario = $window.width()/2;
$contentw.animate({left: '100%', marginLeft: -width_mario, marginTop: 0}, 600);
$fixed.css({'background-color': '#510000', 'left': '25%'});
createMario();
trigger(); // fire trigger not until createMario() is finished with animation
});
inside the function of createMario() are loads of jQuery .animate()ions. What I intend to do is, to fire trigger not until the animations of createMario()are finished. Something like the return function you can do if an animation is finished BUT inside the click function.
Thanks
edit: and not with setTimeout() because the animations have a random speed.
You can't literally do that. What you need to do instead is pass a reference to the trigger function into createMario and have it call that function when the animations are finished. Assuming the animations are via jQuery, they have a callback they call when they're done.
pass it as a callback, something like this:
function createMario(calback_fn) {
...
animate({...}, {duration: 12345, complete: callback_fn});
...
}
Make sure you add it to the longest animate call.
Note that may need to slightly change the animate syntax, see http://api.jquery.com/animate/ for different argument options).
Then do:
...
$fixed.css({'background-color': ... as before... });
createMario(trigger);
You can also use element.promise.done(function() { trigger(); }); if you're animating 1 element in the createMario function, or you can attach it to the longest animated element also (the one that takes the longest to finish), and it will call the trigger() function after that element has finished animating.
Here's a jsFiddle I put together that exemplifies this: http://jsfiddle.net/WPHmY/2/
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 am trying to call a user defined function within a jquery function to no avail I have tried this:
function close_quote_bar() {
alert('oh hai');
}
if($('#sliding_quote:visible')) {
$('#sliding_quote').slideUp();
$('#trans_div').animate({opacity: 0.0}).css('display','none').close_quote_bar;
}
and this
//Function to close quote bar
function close_quote_bar() {
alert('oh hai');
}
$('#get_quote_bar img').click(function() {
if($('#sliding_quote:visible')) {
$('#sliding_quote').slideUp();
$('#trans_div').animate({opacity: 0.0}).css('display','none').close_quote_bar;
}
});
With not much luck! Nothing happens when I cal close_quote_bar, or I get an Object is missing method error!
hope you guys can point me in the right direction I am really struggling with this one
I assume you want something like this:
$('#sliding_quote:visible').slideUp( function(){
$('#trans_div').css('display','none');
close_quote_bar();
} );
It uses the slide up callback to then set the object to display none and run your function. This code also does away with the if statement by instead using the selector to only affect the visible element.
you should try this:
$('#trans_div').animate({opacity: 0.0}, 400, function(){
$(this).css('display','none');
close_quote_bar();
});
Building on #laurencek's answer.
$('#sliding_quote:visible').slideUp( function(){
$('#trans_div').fadeOut( function(){
close_quote_bar();
});
});
this executes close_quote_bar() as a callback of fadeOut.
This line of your code needs to be changed
$('#trans_div').animate({opacity: 0.0}).css('display','none').close_quote_bar;
You have to call it like this
$('#trans_div').animate({opacity: 0.0}).css('display','none');
close_quote_bar();
And finally to trigger your closequotebar AFTER your animation have finished to animate, use this code, notice that a function() is in the 3rd parameter.
$('#trans_div').animate({opacity: 0.0}, 400, function(){
$(this).css('display','none');
close_quote_bar();
});
both animate and slideUp supports adding function() block as their parameters, so you could call a function after the animating has finished
http://api.jquery.com/animate/
see the "complete" part
It turns out the function was being called and it was not an issue with the scope or anything like that.
I had another function that was executing on scroll (.scroll) that was conflicting with the function hence why it was behaving unexpectedly and appeared not to be executing.
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);
I do not know what title to give so please I do apologize, i'm just getting curious why in the code below, the text is getting changed before it even fades out even if i've put it after a fade.
$('form').submit(function(){
return false;
});
$('button').on('click',function(){
$(this).addClass('busy');
$(this).parent().find('button').attr('disabled',true);
$(this).parent().find("button:not('.busy')").fadeOut(500);
$('p').text('Processing..').fadeIn(500).trigger('sfsfsf','wala');
});
$('p').on('sfsfsf',function(e,data){
//this line below
$(this).delay(1000).fadeOut(500).text('Complete!');
$(this).fadeIn(500,function(){
$(this).delay(500).fadeOut(500);
});
});
http://jsfiddle.net/v4nwQ/
Why is that so, and how do i Fix it?
Because fadeOut() returns immediately before the animation has complete; text() then gets processed straight away. You should instead change the text in the fadeOut() callback;
$(this).delay(1000).fadeOut(500, function () {
$(this).text('Complete!');
});
Unrelated, but something to note; you should look at caching the result of $(this); you're calling it a lot.
$('p').on('sfsfsf',function(e,data){
var self = $(this);
self.delay(1000).fadeOut(500, function () {
self.text('Complete!');
});
self.fadeIn(500,function(){
self.delay(500).fadeOut(500);
});
});
Yes, that is correct. All functions in a chain execute immediately. If you want something to execute after an animation, you use the callback parameter that all animations include.
And delay only delays animations! It has no effect on things that are not animations. So:
$(this).fadeOut(500, function() { $(this).text('Complete!'); });
Try:
$(this).parent().find("button:not('.busy')").fadeOut(500, function() {
$('p').text('Processing..').fadeIn(500).trigger('sfsfsf','wala');
});
you need to change the text in the call back funciton of the fade like you're doing it in the last few lines:
$(this).fadeIn(500,function(){
$(this).delay(500).fadeOut(500);
});
otherwise the text change is executed immediately