We Keep Coding

jQuery fix click memorising

$(".fsb").on("click", function () {
if ($('.fsb').hasClass('fsbc')) {
$('#sfo p').fadeIn(500);
setTimeout(function () {
$('#sfo p').fadeOut(500);
}, 500);
} else {
$('#sfof p').fadeIn(500);
setTimeout(function () {
$('#sfof p').fadeOut(500);
}, 500);
}
});
After clicking many times on the button(fast), it will repeat hiding and unhiding that much times. I want to disable that but have no ideas.(sorry, I'm new to this).

jQuery allows to use .fadeIn() and .fadeOut() in chain without setTimeout().
To remove all queued animation place .stop(true) before them.
Inside the event handler, you can use $(this) to work on the clicked element.
$(document).ready(function() {
$(".fsb").on("click", function() {
if ($(this).hasClass('fsbc')) {
$('#sfo p').stop(true).fadeIn(500).fadeOut(500);
} else {
$('#sfof p').stop(true).fadeIn(500).fadeOut(500);
}
});
});
.hide-p p {
display: none;
}
<button class="fsb fsbc">Click SFO</button>
<button class="fsb">Click SFOF</button>
<div id="sfo" class="hide-p">
<p>SFO</p>
</div>
<div id="sfof" class="hide-p">
<p>SFOF</p>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

JQuery: Wait until all fadeout`s of function are finished

I have next function:
function clearWorkingArea() {
$('.extensionText').children('span').fadeOut(600, function() { $(this).remove() });
$('ul.texts').fadeOut(600, function() { $(this).empty() });
$('.buttonsDiv').fadeOut(600, function() { $(this).remove() });
$('.processingDiv').fadeOut(600, function() { $(this).remove() });
}
I would like to call another function only after all animations in this function are finished.
I tried :
$.when(clearWorkingArea()).done(function() {...});
Also:
clearWorkingArea().promise().done(function() {...});
No luck, it is still not working properly.
Is there is a way, instead of callback hell of fades, to do such function behavior?

Update: just double checked jquery, animations can return a promise. I initially just did promise, but to get a promise with jquery you do promise(). So you don't need the helper function after all.
Below is an example.
Also if you have multiple selectors doing the same thing, you can combine.
eg. below .two & .three fadeOut at 600ms, but I've made .one fadeOut over 1000ms. Also added a none-existent selector to make sure things still work.
Promise.all(
[
$('.one').fadeOut(1000, function () {
$(this).empty(); }).promise(),
$('.two,.three').fadeOut(600, function () {
$(this).empty(); }).promise(),
$('.not-exist').fadeOut(600, function () {
$(this).empty(); }).promise()
]
).then(function () {
console.log('all done');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="one">
Three 1000 ms
</div>
<div class="two">
One 600 ms
</div>
<div class="three">
Two 600 ms
</div>

clearWorkingArea only starts the animations, but these animations are all async.
At the end of clearWorkingArea, your animations are unlikely to be over.
You have to fetch a promise for each animation and then use Promise.all to trigger your code when all promises are over.
According to the documentation, you can get the promise by using the start parameter in the options of fadeOut like methods:
jQuery fadeOut()
Hope this helps!

How about we apply some simple logic like this.
function doWorkWhenAllFinished(counter) {
if (counter == 4) {
//All fade animations have been complete.
//Good to go...
}
}
function clearWorkingArea() {
var counter = 0;
$('.extensionText').children('span').fadeOut(600, function() {
counter++;
$(this).remove();
doWorkWhenAllFinished(counter);
});
$('ul.texts').fadeOut(600, function() {
counter++;
$(this).empty();
doWorkWhenAllFinished(counter);
});
$('.buttonsDiv').fadeOut(600, function() {
counter++;
$(this).remove();
doWorkWhenAllFinished(counter);
});
$('.processingDiv').fadeOut(600, function() {
counter++;
$(this).remove();
doWorkWhenAllFinished(counter);
});
}

Set timeout within hover function

I have content that is dynamically loaded. This content needs to be invoked in the following way due to it's dynamic nature.
This works perfectly if no setTimeout is used. Is there a way of setting a timeout of 0.25 seconds in this instance?
Fiddle https://jsfiddle.net/vuezt9dh/
Works
$(".wrapper").on({
mouseenter: function() {
$(this).find('.show-me').slideDown(150);
},
mouseleave: function() {
$(this).find('.show-me').slideUp(0);
}
}, '.main-page');
Doesn't work
$(".wrapper").on({
mouseenter: function() {
var $this = $(this);
setTimeout(function() {
$this.find('.show-me').slideDown(150);
}, 250);
},
mouseleave: function() {
$(this).find('.show-me').slideUp(0);
}
}, '.main-page');

Your targeting is incorrect, i'm suprised this works at all (didn't in my tests)
Demo https://jsfiddle.net/vuezt9dh/2/
Should be:
$(".main-page").on({
mouseenter: function() {
var $this = $(this);
setTimeout(function() {
$this.find('.show-me').slideDown(150);
}, 550);
},
mouseleave: function() {
$(this).find('.show-me').slideUp(0);
}
}, '.wrapper');
Your wrapper and main-page were the wrong way around.

JQuery .slideUp() after time OR mouseleave

I got an element that is slided down by JQuery using .slideDown() method
$('#dropdown_shopping_cart').slideDown(800);
Now i want it to slide up after 6 seconds, but only if there is no hover on the element, if there is an hover, it should not .slideUp().
So far i worked with a timeout that added display:none to the element while i was giving the element´s hover display:block!important; in CSS so it would not get display: none until the hover is over.
JS
setTimeout(function () {
$('#dropdown_shopping_cart').css('display', 'none');
}, 6000);
_______________________________________________________
CSS
#dropdown_shopping_cart:hover {
display: block!important;
}
Now i want to add the .slideUp() to this.

Check this:
var myVar;
myVar = setTimeout(function() {
$('#dropdown_shopping_cart').slideUp(800)
}, 6000);
$("#dropdown_shopping_cart").hover(
function() {
clearTimeout(myVar);
},
function() {
myVar = setTimeout(function() {
$('#dropdown_shopping_cart').slideUp(800)
}, 6000);
}
);
By default shopping cart will slideUp() after 6 seconds, if mouse hover action occured, setTimeOut will be cleared, after mouse leave the shopping cart, setTimeOut will setted automatically

You can clear the timeout on mouseenter and reset it on mouseleave like this:
var hide_div_to;
function hideDiv(){
hide_div_to = setTimeout(function () {
$('#dropdown_shopping_cart').slideUp(800);
}, 6000);
}
$('#dropdown_shopping_cart').slideDown(800,hideDiv());
$('#dropdown_shopping_cart').mouseenter(function(){
clearTimeout(hide_div_to);
});
$('#dropdown_shopping_cart').mouseleave(function(){
hideDiv();
});
Here is a working JSFiddle
UPDATE
If you don't wan't to wait the timeout again when you leave, after the timeout is reached, you can do this:
$('#dropdown_shopping_cart').slideDown(800);
setTimeout(function () {
if(!$('#dropdown_shopping_cart').is(':hover')){
$('#dropdown_shopping_cart').slideUp(800);
}
else{
$('#dropdown_shopping_cart').mouseleave(function(){
$('#dropdown_shopping_cart').slideUp(800);
});
}
}, 3000);
And here is a JSFiddle and here is another one that shows how this can be triggered multiple times.

Id suggest you work with mouseover and a class:
$('#dropdown_shopping_cart').hover(function(){
if(!$('#dropdown_shopping_cart').hasClass('active'))
{
$(this).addClass('active');
}
else
{
$(this).removeClass('active');
}
},
function() {
var myVar = setTimeout(function() {
if(!$('#dropdown_shopping_cart').hasClass('active'))
{
$('#dropdown_shopping_cart').slideUp()
}
}, 6000);
})
And than in your setTimeout Function you add:

demo: http://jsfiddle.net/yo5gnvy3/7/
$('#dropdown_shopping_cart').hide().slideDown(800, function () {
var events = $._data($(this)[0], "events") || {};
if (events.mouseover === undefined) {
$(this).delay(1000).slideUp()
}
});

How to detect whether mouseout is true or not?

I have this simple fiddle as a working example-
Jsfiddle
I am trying to detect mouseout event from a div section.
When i mouseover on this image it shows caption; saying "Change Image". After 5 seconds caption goes fadeOut.
I am using setInterval to set it accordingly. Now if I do mouseout of this image, then only I want Interval function should be called.
How do i detect mouseout event in jQuery?
Tried-
$(function () {
$('.image-profile').mouseover(function () {
$('.change-image').stop().show();
if ($('.image-profile').mouseout()== true) {
TimeOut();
}
});
setInterval(function TimeOut() {
$('.change-image').fadeOut()
}, 5000
);
});

var ImageProfileTimer;
$('.image-profile').on('mouseenter',function(){
clearTimeout(ImageProfileTimer);
$('.change-image').stop().show();
}).on('mouseleave',function(){
ImageProfileTimer = setTimeout(function(){
$('.change-image').fadeOut()
}, 5000);
});
Use setTimeout and clearTimeout
Demo : http://jsfiddle.net/xMNTB/9/

$('.image-profile').on('mouseleave', function() {
setTimeout(function() {
$('.change-image').fadeOut()
}, 5000);
});

http://jsfiddle.net/xMNTB/7/
Now the div show up on mouse enter and disappears 5 seconds after mouse leave.
$(function () {
$('.image-profile').mouseenter(function () {
$('.change-image').stop().show();
});
$('.image-profile').mouseleave(function () {
setTimeout(function TimeOut() {
$('.change-image').fadeOut()
}, 5000);
});
});

Try This:
(function () {
$('.image-profile').mouseover(function () {
$('.change-image').stop().show();
if ($('.image-profile').mouseout() == true) {
TimeOut();
}
}).mouseout(function () {
setInterval(function TimeOut() {
$('.change-image').fadeOut()
}, 5000);
});
});
JSFIDDLE DEMO