Develop Reference

JQuery onclick div hide/show/reset for the next time clicked

Simple question from a newbie:
How do I reset/restart a function after completing the time of (500
ms) in order to repeat the function each time I click on a specific
button?
FIRST PART OF THE CODE WORKS
my div is disappearing after 500ms fading out
$('.animate-this').click(function () {
$('p').show().delay(500).fadeOut();
});
SECOND PART IS MISSING
I would need to reset the fuction in order to repeated immediately...
I guess there is a very simple solution for that..

fadeOut accepts a callback function. You can use that
function animate() {
$('p').show().delay(500).fadeOut('slow', function() {
animate()
});
}

Triggering a CSS animation again with a JavaScript event

I'm trying to trigger a CSS animation again with JavaScript. Tried a lot of tricks, nothing works.
Steps:
<canvas class="shake"> is added to document.body
shake animation works!
Press "Shake" button to re-add the CSS.
Animation does not get triggered again.
Code
https://jsbin.com/pasitic/edit?css,js,console,output
The code is really simple. I'm hoping that there is a really simple and decent solution out there. I'm using vanilla JavaScript.
Update
Solved and the example was updated with the working code.

Try this:
...
$btn.addEventListener("click", function(e) {
e.preventDefault();
console.log("clicked");
$canvas.className = "shake"; // Doesn't trigger the animation!
});
$canvas.addEventListener("animationend", function(e) {
$canvas.className = "";
});
...
It adds an event listener that removes the class name which triggers after the animation ends.

If you remove a class and add it again the animation won't play.
You could wrap the add "shake" class in a setTimeout function with a tiny delay and the animation will work.
$canvas.className = "";
setTimeout(function(){
$canvas.className = "shake";
}, 50);
Also you could use the following:
$canvas.classList.remove("shake");
void $canvas.offsetWidth;
$canvas.classList.add("shake");
The $canvas.offsetWidth; will trigger a reflow.
You can read more about it here:
https://css-tricks.com/restart-css-animation/

Adding the timeout with some delay worked. I have added the delay equal to animation-duration but adding any amount of delay will work.
$btn.addEventListener("click", function(e) {
e.preventDefault();
console.log("clicked");
$canvas.className = 'shake';
setTimeout(function(){ $canvas.className = ''; }, 500);
});

Jquery fadeIn/fadeOut img change

I've been trying to fix this bug of mines for about 3 hours now, searched everything and everywhere and can't find an answer.
The #test is an img element. I want the element to first fadeout, then change it's image and then fadein. But when I click on it it changes the image WHILE fading out and then fades in with the already changed image. Whats the problem here? Maybe I should use the animate() function or stop() or something else? Really confused, javascript and jQuery is so very hard
$("#test").click(function(){
ASD = $("#test").attr('alt');
$("#test").fadeOut(700);
$("#test").attr('src', ASD);
$("#test").fadeIn(700);

You should use the callback parameter for .fadeOut() which gets called when the animation ends:
$("#test").click(function(){
ASD = $("#test").attr('alt');
$("#test").fadeOut(700, function() {
$("#test").attr('src', ASD);
$("#test").fadeIn(700);
});
});

You need to use the callback of fadeOut so as to wait until the first animation is finished before you replace the source and start the second animation:
$("#test").on('click', function(){
var ASD = $(this).attr('alt');
$(this).fadeOut(700, function() {
$(this).attr('src', ASD).fadeIn(700);
});
});

Use the callback option in fadeOut(). This ensures the other actions will only happen once fadeOut finishes:
$("#test").click(function(){
ASD = $("#test").attr('alt');
$("#test").fadeOut(700, function() {
$("#test").attr('src', ASD);
$("#test").fadeIn(700);
});
});

Preventing jQuery function to repeat effect twice?

i am making a something like this :
When a user mouseenter DIV1 , the DIV2 will fadeIn and when the user mouseout DIV1 , DIV2 will fadeOut
But something weird is happening , when you hover in and out DIV1 quickly , the FADEIN and OUT effect of DIV2 will repeat the total number of your hovers in.
For example:
i quickly hovers in and out for 10 times # DIV1 , DIV2 will continue to FADE IN and OUT for 10 times although my mouse is not hovering it.
I hope people understand what i'm saying.
CODE:
$('div1').bind('mouseenter', function() {
$('div2').fadeIn(600);
});
$('div1').bind('mouseout', function() {
$('div2').fadeOut(600);
});
Thanks and have a nice day .

use .stop(true,true) on the mouseout event that will stop all the existing animations
here is the working fiddle http://jsfiddle.net/XkmFy/

You can stop the existing animation when you start a new animation instead of stacking them up:
$('div1').bind('mouseenter', function() {
$('div2').stop().fadeIn(600);
});
$('div1').bind('mouseout', function() {
$('div2').stop().fadeOut(600);
});

You want .stop, which stops the current animation so that the animation queue does not get filled up with deferred animations: http://jsfiddle.net/pQQ2G/.
$('#div1').bind('mouseenter', function() {
$('#div2').stop().fadeIn(600);
});
$('#div1').bind('mouseout', function() {
$('#div2').stop().fadeOut(600);
});
Also, you shuold use #div1. div1 selects div1 elements, whereas you have div elements I suppose.

use this
$('div1').bind('mouseenter', function() {
$('div2').fadeIn(600).stop(true, true);
});
$('div1').bind('mouseout', function() {
$('div2').fadeOut(600).stop(true, true);
});
hope it helps

How do you cancel a jQuery fadeOut() once it has started?

I have a basic div element to represent a message that I show for a few seconds and then fade it out using
$('#message').fadeOut(5000);
I want to be able to cancel the fade out if the user hovers their mouse over the div.
How can I cancel the fade out once the fadeOut method has started to fade the div?
My existing code, below, works if the mouse enters the div whilst it is being shown but I need to allow for if the user hovers over the div once it has started to fade.
$('#message').mouseenter(function() {
clearTimeout(this.timeout);
});
$('#message').mouseleave(function() {
this.timeout = setTimeout("$('#message').fadeOut(5000)", 3000);
});
$('#message').fadeIn(2000, function() {
this.timeout = setTimeout("$('#message').fadeOut(3000)", 3000);
});

Check out the stop function
http://docs.jquery.com/Effects/stop#clearQueuegotoEnd

Also, you can test if an element is in the middle of an animation using the :animated selector:
$('#message').mouseover(
function () {
if($(this).is(':animated')) {
$(this).stop().animate({opacity:'100'});
}
}
);

In my case stop() merely didn't work at least in Firefox, after searching I figured out that It should be stop(true, true):
$('#message').mouseover(
function () {
$(this).stop(true, true).fadeOut();
}
);
stop(): Stops the currently-running animation on the matched elements.
or even you can use finish() instead:
$('#message').mouseover(
function () {
$(this).finish().fadeOut();
}
);
but there is a side effect about finish(), it stops all other running animations too.
finish(): Stops the currently-running animation, remove all queued animations, and complete all animations for the matched elements.
Read more here.