Callback function to be executed after jQuery show / hide? - javascript

In iOS, the following code has a noticeable flicker between the hide() and the scrollBy():
element.hide();
window.scrollBy(0, -elementHeight);
This is because toggling between display: none and display: block on iOS is a heavy task, as if the elements are being added to and removed from the DOM.
I need a way to perform window.scrollBy() as a callback, once the hide() has successfully completed and the DOM has updated. Is there a way to do this in jQuery?

Either pass a duration and a callback, or just pass a callback option, like this:
element.hide(0, some_function);
// or
element.hide({done: some_function});
By default, the second option takes 400 ms. To do it immediately, use one of these:
element.hide(0, some_function);
// or
element.hide({duration: 0, done: some_function});
Here's a jsFiddle demo.
See the jQuery documentation for more details.

From the jQuery api:
.hide(options)
complete
Type: Function()
A function to call once the animation is complete.
Try this:
element.hide({complete: function(){
window.scrollBy(0, -elementHeight); });

Related

why can't I delay addClass and removeClass using jquery?

This is my code:
$("#form_editor").addClass('abcd')
$("#form_editor").delay(32000).removeClass('abcd')
The class never gets applied if I have the second line uncommented. If I comment it out, then the class gets applied as expected. It seems that the second line executes without any delay at all i.e. ignores .delay(32000).
Does delay work with addClass and removeClass? I assumed it would delay the call to any function that came after it, but apparently not as it seems to execute right away.
You can, but you need to queue()
$("#form_editor").addClass('abcd').delay(3200).queue(function() {
$(this).removeClass('abcd');
});
.abcd:before{
content:"abcd";
background:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="form_editor">efgh....</div>
or use setTimeout method:
var $formEditor = $("#form_editor"); // we plan to reuse it so let's cache it!
$formEditor.addClass('abcd'); // add
setTimeout(function(){
$formEditor.removeClass('abcd'); // remove
}, 3200);
.abcd:before{
content:"abcd";
background:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="form_editor">efgh....</div>
jQuery animations (.animate, .fadeTo, fadeIn, etc...) add to the animation queue stack, an jQuery internal function than handles "what's next?" (laically speaking), while other "animation-less" methods (like .text(), addClass(), .on(), .click() etc...) do not.
To easily remember .queue() think of it as the missing (really is) callback functionality for .delay(2000, function(){ /*BAM!*/ }) /* well sadly, this does not works */

jQuery How to make a popup Appears / Disappears on timer?

When my website loads, the popup appears - I need to make it automatically close after a specific time.
$(document).ready(function () {
//select the POPUP FRAME and show it
$("#popup").hide().fadeIn(1000);
//close the POPUP if the button with id="close" is clicked
$("#close").on("click", function (e) {
e.preventDefault();
$("#popup").fadeOut(1000);
});
});
There is already a button but i need to remove it.
You can use the delay() function for that:
$(document).ready(function() {
$("#popup").hide().fadeIn(1000).delay(5000).fadeOut(1000);
$("#close").on("click", function(e) {
e.preventDefault();
$("#popup").fadeOut(1000);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="popup">popup</div>
Please mind the note that is given on the documentation:
The .delay() method is best for delaying between queued jQuery
effects. Because it is limited—it doesn't, for example, offer a way to
cancel the delay—.delay() is not a replacement for JavaScript's native
setTimeout function, which may be more appropriate for certain use
cases.
Javascript have option setTimeout .setTimeout is a native JavaScript function (although it can be used with a library such as jQuery, as we’ll see later on), which calls a function or executes a code snippet after a specified delay (in milliseconds).
setTimeout(function() {
$("#popup").fadeOut(1000);
}, 1000);
or in jquery use .delay(). Set a timer to delay execution of subsequent items in the queue.
$("#popup").delay(1000).fadeOut(1000);

How to detect when all animations have stopped?

I'm using this code to stop simultaneous animations on 2 elements:
$('#container').find('*').stop(true, true);
The animation can be stopped by an end user hovering over a button, in which case the animation stops after completion (which is what I want). However, the button hover also initiates another function (removes and reloads the elements), and there's a conflict if that function runs before the animations are complete.
I was thinking that using 'after' or 'complete' with the above code might work, but I can't figure out what the syntax would be.
im not sure what you are trying to achieve, but in order to check whether or not there are running/pending animations on the object using jQuery, you can use .promise().done()
example, somehing of this sort:
var animations_running;
$('#container').promise().done(function() {
animations_running=false;
});
$('#container').on("mouseover",".SomethingInside",function(){
if(animations_running==false){
//...do animations...
animations_running=true;
}
});
you can also add a callback function to your jQuery animations as follows:
$('#container').on("mouseover",".SomethingInside",function(){
if(animations_running==false){
$(this).animate({
left:+=50
},500,function(){
//...this is the callback function...
});
animations_running=true;
}
});

Wait for animation to complete before continuing in jQuery

Is there anyway to wait for a jQuery animation to finish before proceeding with another command?
For example, I want to fade out/slide up an element, change some items within the element and then fade them back in/slide back down.
If I put the statements one after another, you can see the items change before the animation completes.
$('#item').fadeOut();
$('#item').html('Changed item');
$('#item').fadeIn();
Thanks.
You can pass callback in fadeIn/fadeOut. jQuery docs
$('#item').fadeOut('slow', function(){
$('#item').html('Changed item');
$('#item').fadeIn();
});
You can either use the callback method which gets called from .fadeOut, like
$('#item').fadeOut('fast', function() {
$(this).html('Changed item').fadeIn();
});
or use the underlaying Deferred object
$('#item').fadeOut('slow').promise().done(function() {
$(this).html('Changed item').fadeIn();
});
Pass a callback function to fadeOut.
$("#item").fadeOut(function() {
$(this).html("changed").fadeIn();
});
This is the sort of thing you'll learn in a basic jQuery tutorial.
$('#item').fadeOut('slow', function() { // do your stuff here });
For more info: http://docs.jquery.com/Effects/fadeOut#speedcallback

Possible to have "mouseover for X seconds" functionality using jQuery?

I currently have several elements in a row that have a mouseover event that fires some animation. My problem is that if someone mouses over several of the elements in quick succession the animation gets a little frantic.
I'm curious if there is a way to have a mouseover event that only fires if the mouse is over an element for a certain amount of time (say 250 milliseconds). Can this be done with jQuery?
I would suggest you use setTimeout for this:
(function ($) {
var t;
$('ul li').hover(function() {
var that = this;
window.clearTimeout(t);
t = window.setTimeout(function () {
$(that).animate({opacity: .5}, 'slow').animate({opacity: 1});
}, 250);
});
}(jQuery));
If there are multiple items activated in rapid succession the timeout will override the timeout-id thus preventing the first item that should not start from animating.
It does not require any arcane plugin (although hoverIntent may provide some nice additional features you may want to use) and window.setTimeout is supported everywhere.
UPDATE
I updated the code sample to work.. was writing this from memory yesterday and didn't get the setTimeout call quite right.. Also see this jsFiddle for reference.
The issue I see with this is that it will execute the hover animation even if you leave the . So you could also add a $('ul').mouseleave(function() { window.clearTimeout(t) }); to prevent that.
greetings Daniel
I suggest that you check out the jQuery HoverIntent plugin ( 1.4k minified ). Here's the link: http://cherne.net/brian/resources/jquery.hoverIntent.html. It's a great plugin, I've used it many times!
Here's a small sampling of code:
var config = {
over: makeTall, // function = onMouseOver callback (REQUIRED)
timeout: 500, // number = milliseconds delay before onMouseOut
out: makeShort // function = onMouseOut callback (REQUIRED)
};
$("#demo3 li").hoverIntent( config )
yes:
to accomplish this put a setTimeout in your onMouseover function and a clearTimeout on mouseout
You may need a little more logic, but that's the nuts and bolts of it
here's an example of stop() in action, hope that will help:
without stop():
http://jsfiddle.net/5djzM/
with stop() cleaning the queue of animations:
http://jsfiddle.net/KjybD/

Categories