Develop Reference

Set delay for the second click function jQuery

I want the second click function to be delayed by 500ms, where do I insert this?
$(document).ready(function(){
$('.dropToggler').click(function() {
$(this).parent().addClass("open");
});
$('.acceptCta').click(function() { //I want the delay on this function.
$(this).parent().removeClass("open");
});
});
Tried this too, didn't work:
$(document).ready(function() {
$('.dropToggler').click(function() {
$(this).parent().addClass("open");
});
setTimeout(function() {
$('.acceptCta').click(function() {
$(this).parent().removeClass("open");
});
}, 800);
});

You need to delegate and tell which element you are referring to when clicking and use that for setTimeout - removeClass function
var $this = $(this) // will be click function
setTimeout(function() {} does not know what is $(this) as we searching for the parents of the clicked event element.
$(document).ready(function() {
$('.dropToggler').click(function() {
$(this).parent().addClass("open");
});
$('.acceptCta').click(function() {
//This needed
var $this = $(this)
//delay removeClass
setTimeout(function() {
$this.parent().removeClass("open");
}, 800);
});
});

setTimeout(function(){
//your code goes here
alert("Hello");
}, 3000);//here you can set the time in milliseconds
you can use the setTimeout Function

jQuery CSS Opacity Animate

So I'm trying to create a simple fading slideshow with five slides that repeats when finished.
I feel like what I've got should work, but it's not.
<script type="text/javascript">
$(document).ready(function() {
function playslide(){
setTimeout(function(){
$("#slide-two").animate({"opacity":"1"}, 2000, 'swing').delay(11000).animate({"opacity":"0"}, 1, 'swing')}, 10000);
setTimeout(function(){
$("#slide-three").animate({"opacity":"1"}, 2000, 'swing').delay(11000).animate({"opacity":"0"}, 1, 'swing')}, 20000);
setTimeout(function(){
$("#slide-four").animate({"opacity":"1"}, 2000, 'swing').delay(11000).animate({"opacity":"0"}, 1, 'swing')}, 30000);
setTimeout(function(){
$("#slide-five").animate({"opacity":"1"}, 2000, 'swing').delay(11000).animate({"opacity":"0"}, 2000, 'swing')}, 40000);
}
playslide();
});
</script>
The idea is that the first slide will always have its opacity set to 1, so that when the last slide fades out, it's as if it's starting again. Each slide will hold for 10 seconds before fading out and after each slide fades in, the previous slide's opacity will be set back to 0 ready for the next time it repeats.
I hope it's not an obvious mistake. Apologies if it is...

Please why not use a .fadeIn() and .fadeOut() instead?
setTimeout(function () {
$("#slide-two").fadeIn(400, function () {
setTimeout(function () {
$("#slide-two").fadeOut(function () {
$("#slide-three").fadeIn(400, function () {
// So on...
});
}, 1000);
});
}, 1000);
Better to use these functions for doing it instead of you manually animating opacity.

https://jsfiddle.net/sk8ruo3u/
here's how I would do it
var list = ['.one','.two','.three','.four'];
$.each(list, function(index, value){
changeOpacity(value, index*1000);
});
function changeOpacity(target, timeout) {
setTimeout(function () {
$(target).animate({
opacity: 0.05
}, 1000);
}, timeout);
};

Delay jQuery fadeIn due to unwanted behavior

How do I make my .right-menu DIV to fadein only after a couple of moments the mouse is hovering its parent .right-menu-background ? The thing is that when you move the cursor quickly in and out, .right-menu DIV is reappearing a lot of times after.
How do I delay animation for few ms?
Here's the code:
$(function(){
$(".right-menu-background").hover(function(){
$(this).find(".right-menu").fadeIn();
}
,function(){
$(this).find(".right-menu").fadeOut();
}
);
});

a easy fix is to use .stop()
$(function () {
$(".right-menu-background").hover(function () {
$(this).find(".right-menu").stop(true, true).fadeIn();
}, function () {
$(this).find(".right-menu").stop(true, true).fadeOut();
});
});
using timer
$(function () {
$(".right-menu-background").hover(function () {
var el = $(this).find(".right-menu");
var timer = setTimeout(function(){
el.stop(true, true).fadeIn();
}, 500);
el.data('hovertimer', timer);
}, function () {
var el = $(this).find(".right-menu");
clearTimeout(el.data('hovertimer'))
el.stop(true, true).fadeOut();
});
});

Use the stop() function in front of fading calls ...stop(true, true)
With those two parameters set to true, the animation queue is cleared and the last animation is played this will get ride of the weird effect
$(this).find(".right-menu").stop(true, true).fadeIn();

Use .delay() function.
Here is the code:
$(function(){
$(".right-menu-background").hover(function(){
$(this).find(".right-menu").delay(800).fadeIn(400);
},function(){
$(this).find(".right-menu").fadeOut(400);
});
});
Check the demo here: http://jsfiddle.net/Mju7X/

javascript delay and show gif

Do you know how I can implement a javascript delay with animated gif when button is clicked? I have the button click functionality, but I want to add a 2 second delay, with gif. Here is my working javascript, without delay. Thank you.
$(function() {
$('#myButton').click(function () {
$('#myFrame').attr('src', '/Video/Upload.aspx/');
$('#myFrame').attr('width', '500');
$('#myFrame').attr('height', '200');
$('#vid').hide();
$('#vid2').show();
$('#myFrame').show();
});
});
I tried this, and it didn't work:
$(function openVideo() {
$('#myButton').click(function () {
$('#myFrame').attr('src', '/Video/Upload.aspx/');
$('#myFrame').attr('width', '500');
$('#myFrame').attr('height', '200');
$('#vid').hide();
$('#vid2').show();
$('#myFrame').show();
});
});
setTimeout(openVideo, 2000);

Use the javascript setTimeout function:
function functionName() {
// do stuff.
}
setTimeout(functionName, 2000);
Or like this:
setTimeout(function() {
// do stuff.
}, 2000);
So in your example it might look like this:
$(function openVideo() {
$('#myButton').click(function () {
var delay = setTimeout(function() {
$('#myFrame').attr('src', '/Video/Upload.aspx/');
$('#myFrame').attr('width', '500');
$('#myFrame').attr('height', '200');
$('#vid').hide();
$('#vid2').show();
$('#myFrame').show();
}, 2000);
});
});
Demo

Show the GIF using your preferred method (appendChild, $.append(), innerHTML...)
Then use setTimeout(function() {/* do stuff here */}, 2000) to implement a 2-second delay.
Two seconds is a long time, though. Any delay of more than 0.1 second is usually considered unacceptable without a very good reason.

javascript + jquery + setinterval + animation

I'm having a problem with setInterval and jquery animate. Here is my code:
function slides1() {
...
$("table#agah1").animate({
"left": first1
}, "slow");
$("table#agah2").animate({
"left": first2
}, "slow");
}
$(function () {
cyc = setInterval("slides1()", 3000);
});
When switch to another browser tab, and return after a time, the animation keep doing it without delay, for the time I've been away from the tab, and then act correct. I've added these also without any luck:
$(window).focus(function () {
jQuery.fx.off = false;
cyc = setInterval("slides1()", 3000);
});
$(window).blur(function () {
jQuery.fx.off = true;
window.clearInterval(cyc);
});

Newer versions of jQuery use requestAnimationFrame callbacks to handle effects, and browsers don't process those on hidden tabs.
In the meantime, your setInterval events are still happening, causing more animations to get queued up.
Rather than use setInterval to schedule the animations, use the "completion callback" of the last animation to trigger the next cycle, with a setTimeout if necessary.
function slides1() {
...
$("table#agah1").animate({
"left": first1
}, "slow");
$("table#agah2").animate({
"left": first2
}, "slow", function() {
setTimeout(slides1, 2000); // start again 2s after this finishes
});
}
$(function () {
setTimeout(slides1, 3000); // nb: not "slides1()"
});
This will ensure that there's a tight coupling between the interanimation delay and the animations themselves, and avoid any issues with setTimeout getting out of sync with the animations.