Develop Reference

how can i limit the number of executions of fadeIn () and fadeOut () functions in jQuery?

I'v applied some fadeIn()/fadeOut() functions to my webpage,which are executed on mouseenter/mouseleave, but I'v noticed that if I drag in and drag out the cursor really fast for a multiple times the selected block keeps to appear/disapear for a few seconds after.
I'v tried to google some JQuery functions to fix it, but I haven't found anything.
$('.navbar').mouseenter(function () {
$(".context-box__blur").fadeIn(200).css('display', 'inline-block');
$("span").fadeIn(200).css('display', 'inline-block');
});
$('.navbar').mouseleave(function () {
$("span").fadeOut(200);
$(".context-box__blur").fadeOut(200);
});
How can fix it, or how can I limit the quantity of the function's executions by time?

fadeIn() and fadeOut() has a complete function that runs after fadeIn/fadeOut completed, you may disable fadein or out before the ohter one is not completed:
var wait = false;
function fadeOut()
{
if(wait) return false; // previous action not complete, cancel fadeOut
wait = true;
$("span").fadeOut(200, function(){ wait = false; })
}
function fadeIn()
{
if(wait) return false; // previous action not complete, cancel fadeIn
wait = true;
$("span").fadeIn(200, function(){ wait = false; })
}

It's the way how mouseenter() & mouseleave() works. Try using mouseover()& mouseout() instead.
$("p").mouseover(function(){
$("p").css("background-color", "yellow");
});
$("p").mouseout(function(){
$("p").css("background-color", "lightgray");
});
https://jsfiddle.net/KyleMit/GR8sk/
This JSFiddle will give you a clear idea on how these mouse events work.

Why does nested fadeOut not work if used on the same element that is the outermost fadeIn statement?

Can anyone tell me why the $("#opening-first").fadeOut() line of this is not executing??
$(document).ready(function(){
$("#opening-first").fadeIn(1000).delay(1000, function() {
$("#opening-second").fadeIn(1000, function() {
$("#opening-first").fadeOut(1000, function() {
$("#body-overlay").delay(1000).fadeOut(1000);
});
});
});
});
It seems as if this should be pretty straightforward. Here's the HTML:
<div id="body-overlay">
<div class="centered">
<h1 id="opening-first">My name is Trevor Hinesley.</h1>
<p class="medium" id="opening-second">And I like creating.</p>
</div>
</div>

Your code is not working simply because of the first delay. You see, the second parameter of delay() should be a string for a queue name. You can reuse that queue name with the function stop() or any other method using a "queue" but it doesnt matter since it's not what you are doing here.
If you want to delay the second fadeIn, your code should look like that :
$("#opening-first").fadeIn(1000, function() {
$("#opening-second").delay(1000).fadeIn(1000, function() {
$("#opening-first").fadeOut(1000, function() {
$("#body-overlay").delay(1000).fadeOut(1000);
});
});
});
Fiddle : http://jsfiddle.net/rk4Bz/

fadeout works, but fadein doesn't

As the title states, I have a function that causes a div to fadeOut
$("#myVid").bind("ended", function() {
//other functions
$(".control").animate( {
marginTop: "+=128px"}, 500 );
$(".control").fadeOut(0);
});
and the one where it fades in
$("#myVid").bind("playing", function() {
//other functions
$(".control").fadeIn(0);
});
why isn't it coming back in? the video is actually an array, so that's why it fade out on ended and back in on playing... can I get some help here?
should this be possible:
$(".control").fadeOut(0).delay(500).fadeIn(0);
because delay()s always give me tons of trouble, and now is just delaying the whole ended function(if in front) or doesn't go first(if in back)

I personally use two functions for when i'm using fades:
function fadeIn(id){
$('#'+id).fadeIn('fade', function() {
});
}
function fadeOut(id){
$('#'+id).fadeOut('fade', function() {
});
}
So you could work with those

nice jquery load effect

I would like to load a page inside a div with fadeTo effects.
I have created this function for that
function show(div) {
$("#showdata").fadeTo(300,0.0,function() {
$("#showdata")
.html('<img src="images/loading.gif" />')
.load('includes/show/'+div+'.inc.php')
.fadeTo(300,1.0);;
});
}
The fade from current contents to the image is ok,but after that ,the new contents pop all of a sudden .
I also tried this,but same results :
function show(div) {
$("#showdata").fadeTo(300,0.0,function() {
$("#showdata")
.html('<img src="images/loading.gif" />')
.load('includes/show/'+div+'.inc.php',$("#showdata").fadeTo(300,1.0));
});
}

You need to wrap your code for the .load() callback as an anonymous function like this:
function show(div) {
$("#showdata").fadeTo(300,0.0,function() {
$("#showdata").html('<img src="images/loading.gif" />')
.load('includes/show/'+div+'.inc.php', function() {
$(this).fadeTo(300,1.0)
});
});
}

I tried your code, and it seems to work as you intended. I had to increase the fade time from 300ms to 2000ms to see the fadein better.
The one problem you will have is the loading.gif not showing up. That is because you fade that element out, so you're not going to see anything there :)
edit: you can do something like this instead.
function show(div){
$("#showdata").fadeTo(2000,0.0,function() {
$("#showdata")
.parent().append('<img src="loading.gif" />') //add the image to the container, so you can see it still
.end().load('includes/show/'+div+'.inc.php', function(){
$("#showdata")
.parent().find('img').remove() //remove the image once the page is loaded.
.end().end().fadeTo(2000,1.0);
});
});
}
You would have to add a container div around #showdata.
<div>
<div id="#showdata">TEST</div>
</div>

jQuery - Disable Click until all chained animations are complete

Question
The solution below is intended to slide down the groupDiv displaying div1 and enough space for div2 to slide in. It's all achieved by chaining the animations on the #Link.Click() element.
It seems to bug out, though, when the link is clicked rapidly. Is there a way to prevent this? By perhaps disabling the Click function until the chained animations are complete? I currently have checks in place, but they don't seem to be doing the job :(
Here's the code i'm using:
Custom animate functions.
//Slide up or down and fade in or out
jQuery.fn.fadeThenSlideToggle = function(speed, easing, callback) {
if (this.is(":hidden")) {
visibilityCheck("show", counter--);
return this.slideDown({duration: 500, easing: "easeInOutCirc"}).animate({opacity: 1},700, "easeInOutCirc", callback);
} else {
visibilityCheck("hide", counter++);
return this.fadeTo(450, 0, "easeInOutCirc").slideUp({duration: 500, easing: "easeInOutCirc", complete: callback});
}
};
//Slide off page, or into overflow so it appears hidden.
jQuery.fn.slideLeftToggle = function(speed, easing, callback) {
if (this.css('marginLeft') == "-595px") {
return this.animate({marginLeft: "0"}, speed, easing, callback);
} else {
return this.animate({marginLeft: "-595px"}, speed, easing, callback);
}
};
In the dom ready, i have this:
$('#Link').toggle(
function() {
if (!$("#div2 .tab").is(':animated')) {
$("#GroupDiv").fadeThenSlideToggle(700, "easeInOutCirc", function() {$('#div2 .tab').slideLeftToggle();});
}
},
function(){
if (!$("#groupDiv").is(':animated')) {
$('#div2 .tab').slideLeftToggle(function() {$("#groupDiv").fadeThenSlideToggle(700, "easeInOutCirc", callback);} );
}
}
);
HTML structure is this:
<div id="groupDiv">
<div id="div1">
<div class="tab"></div>
</div>
<div id="div2">
<div class="tab"></div>
</div>
</div>

The issue is your first animating the div#GroupDiv so your initial check if (!$("#div2 .tab").is(':animated')) will be false until the groupDiv has finished animated and the callback is fired.
You could maybe try
if (!$("#div2 .tab").is(':animated') && !$("#GroupDiv").is(':animated'))
however I doubt this will cover really quick clicking. The safest is to unbind the event using
$(this).unbind('toggle').unbind('click');
as the first line inside the if and you can then do away with the animated check. The downside to this is you will have to rebind using the callback you are passing through to your custom animation functions.

You can easily disable your links while animation is running
$('a').click(function () {
if ($(':animated').length) {
return false;
}
});
You can of course replace the $('a') selector to match only some of the links.

Animating something that can be clicked repeatedly is something to look out for because it is prone for errors. I take it that you Problem is that animations queue up and are executed even when you have stopped clicking. The way I solved it was to use the stop() function on an Element.
Syntax: jQuery(selector).stop(clearQueue,gotoEnd) //both parameters are boolean
More Info
When I click on a button, I first stop the animation and clear the Queue, then i proceed to define the new animation on it. gotoEnd can stay false (default value) but you can try tochange it to true if you want, you might like the result.
Usage Example: jQuery('button#clickMe').stop(true).animate({left:+=10}).

you can put this first thing inside the click event
$(element).css({ "pointer-events":"none"});
, and this in the callback function of the animation
$(element).css({ "pointer-events":"auto"});

you can unbind... but this should work too:
if (!$("#div2 .tab").is(':animated') && !$("#GroupDiv").is(':animated')) return;

I have recently made an AJAX jQuery plugin, featuring plenty of animation. The workaround to the AJAX animation bug that I have found is as follows.
$(options.linkSelector).click(function(e){
if ($("#yourNav").hasClass("disabled")) {
return false;
} else {
e.preventDefault();
$("#yourNav").addClass("disabled")
// Prepare DOM for new content
$(content).attr('id', 'content-old');
$('<div/>', {id: 'ajMultiLeft'}).css({'top': '100%'}).insertAfter('#content-old');
// Load new content
$(content).load(linkSrc+ ' ' +options.content+ ' > *', function() {
// Remove old content
$(content).animate({top: '100%'}, 1000, function(){
$(content-old).remove();
$("#yourNav").removeClass("disabled")
});
setBase();
}
What this does is makes the click event for each link respond to nothing whilst the parent div has a class of disabled. The disabled class is set by the function upon initial click and removed via a callback on the final animation.