I've written a simple bit of code that shows a div on a mouseover event. I'd like to mouseover the element for 1s before the event takes place. Any ideas on how I can achieve this? with a brief explanation if possible so I know for next time.
$('.NavSelect h2').mouseover(function() {
$('.NavGroup').hide();
$('#' + $(this).prop('id').replace('item','content')).show();
});
It's probably best to keep this timeout in a data property and clear it on mouseout.
$('.NavSelect h2').mouseenter(function () {
$(this).data('timeout', setTimeout(function () {
$('.NavGroup').hide();
$('#' + $(this).prop('id').replace('item','content')).show();
}, 1000));
}).mouseleave(function () {
clearTimeout($(this).data('timeout'));
alert('mouse left');
});
If I understand what you want to do, you need a setTimeout:
$('.NavSelect h2').mouseover(function() {
setTimeout(() => {
$('.NavGroup').hide();
$('#' + $(this).prop('id').replace('item','content')).show();
}, 1000);
});
Here, the documentation
Update
If you would clear the timeout on mouseleave I suggest you somethig like this:
let time = 0;
$('.NavSelect h2').mouseover(function() {
time = setTimeout(() => {
$('.NavGroup').hide();
$('#' + $(this).prop('id').replace('item','content')).show();
}, 1000);
}).mouseleave(() => { clearTimeout(time); });
Related
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
How can I wait for a click event ?
eg. I want that my <div> wait for 3 seconds after it's fade in, and if within 3 seconds the <div> is not clicked then it fade out.
I tried to give time 2 seconds in fadeOut but mouse click is not working it just fadeOut.
my .js file code:
$(document).ready(function () {
$(".arrow").hide()
$(".container").mouseenter(function () {
$(".arrow").fadeIn()
});
$(".container").mouseleave(function () {
$(".arrow").fadeOut(2000)
});
$(".arrow").click(function () {
$(".container").hide()
});
I'm not sure what you're trying to accomplish but your onClick handler isn't working because syntax is wrong.
Try this:
$(".arrow").on('click', function () {
$(".container").hide()
});
Also you seem to be missing the closing braces of the ready-function.
It should be like this:
$(document).ready(function () {
// Your code here
}); // Don't forget this line
Use a boolean to check if arrow has been clicked at the end of your time limit.
Example
$(document).ready(function () {
var clicked = false;
$(".arrow").click(function () {
clicked = true;
});
$(".container").hover(function () { // i put the two mouseenter, mouseleave functions into one hover(mousein, mouseout) function
$(".arrow").fadeIn();
setTimeout(function () {
if (clicked === false) {
$(".arrow").fadeOut(2000);
}
}, 3000);
}, function () {
$(".arrow").fadeOut(2000);
clicked = false; // i don't know if you want this or not. this resets everything on mouseout. if you want the .arrow thing to stay even after the mouse leaves .container, just get rid of this line
}); // .hover
}); // .ready
$(document).ready(function () {
var clicked = 0;
$(".container").mouseenter(function () {
$(".arrow").fadeIn();
setTimeout(function() {
if(clicked == 0) {
$(".arrow").fadeOut(2000);
}
},3000);
});
$(".container").mouseleave(function () {
$(".arrow").fadeOut(2000);
});
$(".container").click(function () {
clicked = 1;
});
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/
I have this function:
$(".insidediv").hide();
$(".floater").mouseenter(function(){
$(".hideimg").fadeOut(function(){
$(".insidediv").fadeIn();
});
});
$(".floater").mouseleave(function(){
$(".insidediv").fadeOut(function(){
$(".hideimg").fadeIn();
});
});
the function built to make a little animation, when you 'mouseenter' the div the picture I have there is hidden and than a few text show up.
it works fine if i move the mouse slowly. but if i move my mouse fast over the div the function getting confused or something and it shows me both '.insidediv and .hideimg,
how can i fixed that little problem so it wont show me both? thanks!
You need to reset the opacity, because fadeIn and fadeOut uses this css property for animation. Just stopping the animation is not enough.
This should work:
var inside = $(".insidediv"),
img = $(".hideimg");
duration = 500;
inside.hide();
$(".floater").mouseenter(function () {
if (inside.is(":visible"))
inside.stop().animate({ opacity: 1 }, duration);
img.stop().fadeOut(duration, function () {
inside.fadeIn(duration);
});
});
$(".floater").mouseleave(function () {
if (img.is(":visible"))
img.stop().animate({ opacity: 1 }, duration);
inside.stop().fadeOut(duration, function () {
img.fadeIn(duration);
});
});
I just introduced the duration variable to get animations of equal length.
Here is a working fiddle: http://jsfiddle.net/eau7M/1/ (modification from previous comment on other post)
try this:
var $insideDiv = $(".insidediv");
var $hideImg = $(".hideimg");
$insideDiv.hide();
$(".floater").mouseenter(function(){
$hideImg.finish().fadeOut(function(){
$insideDiv.fadeIn();
});
}).mouseleave(function(){
$insideDiv.finish().fadeOut(function(){
$hideImg.fadeIn();
});
});
This will solve your issue:
var inside = $(".insidediv"),
img = $(".hideimg");
inside.hide();
$(".floater").hover(function () {
img.stop(true).fadeOut('fast',function () {
inside.stop(true).fadeIn('fast');
});
},function () {
inside.stop(true).fadeOut('fast',function () {
img.stop(true).fadeIn('fast');
});
});
Updated Fiddle
You need to set the 'mouseleave' function when the mouse is still inside the
'floater' div.
Try this (i have tried it on the jsfiddle you setup and it works):
.....
<div class="floater">Float</div>
<div class="insidediv">inside</div>
<div class="hideimg">img</div>
var inside = $('.insidediv'),
img = $('.hideimg');
inside.hide();
$('.floater').mouseenter( function() {
img.stop().hide();
inside.show( function() {
$('.floater').mouseleave( function() {
inside.hide();
img.fadeIn();
inside.stop(); // inside doesn't show when you hover the div many times fast
});
});
});
.....
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.