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/
Related
when myclass1 is slideUp, I want to hidden myclass2.
i need to live or trigger in jquery.
$('.myclass1').slideUp();
$('.myclass1').on('slideUp' ,function() {
$('.myclass2').hide();
});
slideUp isn't an event. If you look at the docs you'll see the second argument it accepts is a callback function, which is executed after the animation has finished. Try this:
$('.myclass1').slideUp(400, () => $('.myclass2').hide());
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 want to hide a DIV element after the previous effects/movements have completed. If I knew the sequence I could just add code to callback function that I give to .animate() (for example). However in this situation I don't have access to that state (it may or may not be going through an animation/effect). So the two animations/effects are triggered by two different events (button clicks for example).
So I would run fadeOut after the DIV element has finished the current animation/effect. Is this possible with jQuery?
Thanks.
EDIT: So the target is to decouple the current action (fadeOut() for example) code from the previous animation code.
EDIT2: Made the question more clear.
Just call .fadeOut() and it will automatically be added to the end of the fx queue:
http://jsfiddle.net/gilly3/f4vNH/
What about creating a custom event and binding to it with live()?
<script>
$("p").live("myCustomEvent", function(e, myName, myValue) {
$('#div').hide();
});
$("button").click(function () {
$("p").trigger("myCustomEvent");
});
</script>
You will have to show us the previous animation code to get specific advice. In jQuery, animation effects can be chained together and jQuery will automatically queue them one after the other. Or, you can use the completion function of one operation to trigger the start of the next operation.
Examples:
$("#item").fadeIn(1000).delay(1000).fadeOut(500);
$("#item").animate({
opacity: 0.75,
left: '+=250',
}, 5000).delay(1000).fadeOut(500);
The .animate() method also has a completion function which you can use to trigger any operation when the animation completes, but if the next operation is an animation itself, it's easier to just use the automatic chaining as above rather than the completion function:
$("#item").animate({
opacity: 0.75,
left: '+=250',
}, 5000, function() {alert("Animation finished."});
I think you're looking for the complete function parameter in the animate call:
http://api.jquery.com/animate/
$('#clickme').click(function() {
$('#book').animate({
opacity: 0.25,
left: '+=50',
height: 'toggle'
}, 5000, function() {
// Animation complete.
});
});
That's simple, just queue your animation
$("#myDiv").queue(function(){
$(this).fadeOut();
});
It will be executed after the animation queue is complete.
So you can add code after the animation queue and before your fadeOut and do whatever...