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.
Related
How can I have this fiddle to change from first content (mario) to next content (smiley face) without being on hover/click? I want it to change automatically after 5 seconds. Also from second content to third content and fourth content.
Here is a sample from JSFIDDLE. I figured that maybe the coding should be change somewhere here:
$('#text1').hover(function () {
hey();
});
Besides that, anyone knows why my fourth content isn't showing?
I am new in this. Please guide me. Many thanks in advance.
Use setTimeout() function
setTimeout(function () {
hey();
},5000);
Fiddle Updated Fiddle
EDIT
As per your need shoe after 35 seconds
$('#text1,#text2, #text3, #text4').hide();
setTimeout(function () {
$('#text1').show();
hey();
},35000);
function hey() {
setTimeout(function () {
$("#text1").fadeOut("slow", function () {
$(this).next().fadeIn("slow", function () {
$(this).delay(2500).fadeOut("slow", function () {
$(this).next().fadeIn("slow");
});
});
});
},5000);
}
Updated fiddle. NEW FIDDLE UPDATED AS PER COMMENT
Just add setTimeout(hey, 5000); instead hover handler:
$('#text2, #text3, #text4').hide();
setTimeout(hey, 5000);
function hey() {
$("#text1").fadeOut("slow", function () {
$(this).next().fadeIn("slow", function () {
$(this).delay(2500).fadeOut("slow", function () {
$(this).next().fadeIn("slow");
});
});
});
}
Your hey() is showing upto 3rd text.Add another next() transition.
function hey() {
$("#text1").fadeOut("slow", function () {
$(this).next().fadeIn("slow", function () {
$(this).delay(2500).fadeOut("slow", function () {
$(this).next().fadeIn("slow",function(){
$(this).delay(2500).fadeOut("slow", function () {
$(this).next().fadeIn("slow");
});
});
});
});
});
}
If you want to change content automatically after 5 second you should use setTimeout function, for example:
setTimeout(function(){ alert("Hello"); }, 5000) this will triger alert box after 5 seconds...
I Think you have to use setInterval()
setInterval(function(){ hey(); }, 3000);
See this Link what is difference between setTimeout and
setInterval
I'm working on a simple landing page. I have a jquery file but i dont really know how to hide the fade. I mean i just want to animate the 5 image without fade. What do u think where is the probelm ?
http://yourjavascript.com/13873144111/jquery.js - jquery
$(document).ready(function() {
$(".start").click(function() {
$.when($('.start2').fadeIn(2000)).done(function() {
$.when($('.start3').fadeIn(2000)).done(function() {
$.when($('.start4').fadeIn(2000)).done(function() {
$.when($('.start5').fadeIn(3000)).done(function() {
$(".start").hide();
setTimeout(function()
{
$(".start").fadeIn(2000);
$(".start2, .start3, .start4, .start5").hide();
}, 3000);
});
});
});
});
});
});
Well, there's something you don't understand, you're actually using the fadeIn animation, so to 'Hide' it, like you asked you have to actually not use it. If you want the stuffs to appear with no fading, you can either use slideDown, your own .animate to create custom animation or show instead of fadeIn.
So to simply use slideDown, you would do this.
<script type="text/javascript">
$(document).ready(function()
{
$(".start").click(function()
{
$.when($('.start2').slideDown(2000)).done(function() {
$.when($('.start3').slideDown(2000)).done(function() {
$.when($('.start4').slideDown(2000)).done(function() {
$.when($('.start5').slideDown(3000)).done(function() {
$(".start").hide();
setTimeout(function()
{
$(".start").slideDown(2000);
$(".start2, .start3, .start4, .start5").hide();
}, 3000);
});
});
});
});
});
});
</script>
And maybe use slideUp instead of hide
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'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.
I want to show an image after there is hover on link for atleast 1500ms or there is a click. How can I implement this minimal period hover condition while showing up the image ?
The image should remain visible until there is hover on the link or on itself. & should disappear as the mouse moves out of both. How can I implement this ? Thanks in advance!
http://jsfiddle.net/sSBxv/
$('a').click(function() {
alert(1); // alert on click
})
.hover(function() { // when mouse is entering
var $this = $(this);
// set timeout, save timeout id on element to clear later
$this.data('timeout', setTimeout(function() {
$this.click(); // click after 1500ms
}, 1500));
}, function() { // when mouse is leaving
clearTimeout($(this).data('timeout')); // stop the timeout
});
Try this
var hoverTimer;
$("linkSelector").hover(function() {
hoverTimer = setTimeout(function() {
$("imgSelector").show();
}, 1500);
}, function(){
clearTimeout(hoverTimer);
}).click(function(){
clearTimeout(hoverTimer);
$("imgSelector").show();
});
Something to the effect of...
$("#MyLinkSelectorId").hover(function() {
//Do anything you need to do here when it is clicked/hovered
setTimeout(function() {
//Do all of the other things here
}, 1500);
});
Switch out hover with click or bind multiple events to take care of both event types. To hide the images, you can either use a selector on the images with the .hide() method or you can set the opacity if the browser supports it.
$("a.class").hover( function (){ //First parameter is onmouseenter, show the image
$("img").show();
}, function (){ //second is onmouseleave, set a timeout that will hide the image
setTimeout( function(){
$("img").hide();
}, 1500);
}).click( function() { //on click, hide the image right away.
$("img").hide();
});
Since it looks like you haven't already tried something I'll give you the simplest way using jQuery (please note I haven't tested this):
$("#idOfDiv").mouseover(function() {
setTimeout("alertMsg()",1500);
});
function alertMsg()
{
alert('Ive been entered for 1500ms')
}
Also if you're serious about software development you should've been able to come up with this yourself.