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
Related
$("#customerAdded").modal("show").on("shown.bs.modal", function () {
window.setTimeout(function () {
$("#customerAdded").modal("hide");
}, 5000);
location.reload();
});
Ok, it works. But with location.reload(), despite I change the time, the page is reloaded immediately.
I would, after modal closed, that the page was reloaded according the time specified.
You could just fire the location.reload() when you hide your modal:
$("#customerAdded")
.modal("show")
.on("shown.bs.modal", function () {
window.setTimeout(function () {
$("#customerAdded").modal("hide");
location.reload();
}, 5000);
});
$("#customerAdded").modal("hide").on("hidden.bs.modal", function () {
location.reload();
});
Here is the code
$('#customerAdded').on('hidden', function () {
location.reload();
})
I have this code running an animation and I need to to stop and revert to a relatable event after 3 blinks.
$(window).load(function(){
$(function () {
function run_animation($element, delay, duration) {
$element.delay(delay).fadeOut(duration, function () {
$('.countdown-li').html("<li class='countdown-li'><a>Price updated</a>").fadeIn();
run_animation($element, delay, duration);
});
}
run_animation($('.countdown-li').delay(3000));
});
});
You can use a jQuery timer to stop animation after a certain amount of time you want, so try this script:
<script>
$(window).load(function () {
$(function () {
function run_animation($element, delay, duration) {
$element.delay(delay).fadeOut(duration, function () {
$('.countdown-li').html("<li class='countdown-li'><a>Price updated</a>").fadeIn();
run_animation($element, delay, duration);
});
}
run_animation($('.countdown-li').delay(3000));
setTimeout("$('.countdown-li').stop();", 5500);
});
});
</script>
I could have used the setinterval timer option found in javascript. http://javascript.info/tutorial/settimeout-setinterval
I'm fading in and out 3 divs. the fadein and out works great, except the delay is happening after the div is faded out. the code:
runslide();
function runslide() {
$('.expect').fadeIn(1500).delay(7500).fadeOut(2000, function () {
$('.marketing').fadeIn(1500).delay(7500).fadeOut(2000, function () {
$('.consider').fadeIn(1500).delay(7500).fadeOut(1000, function () {
runslide();
});
})
});
}
here is the file I am working on: http://goo.gl/8xt1XZ , it is the slider after the text.
change the code like this
runslide();
function runslide() {
$('.expect').fadeIn(1500).fadeOut(2000, function() {
$('.marketing').fadeIn(1500).fadeOut(2000, function() {
$('.consider').fadeIn(1500).fadeOut(1000, function(){
runslide();
});
})
});
}
DEMO
The delay seems to be working fine. You do have a missing semicolon but I don't think that's the problem. I'm not sure what the problem is on your site. I tried it with jQuery version 1 and 2 and both seems to be working fine.
http://jsfiddle.net/csrow/5t4rL/2/
$('.expect').hide();
$('.marketing').hide();
$('.consider').hide();
runslide();
function runslide() {
$('.expect').fadeIn(1500).delay(7500).fadeOut(2000, function () {
$('.marketing').fadeIn(1500).delay(7500).fadeOut(2000, function () {
$('.consider').fadeIn(1500).delay(7500).fadeOut(1000, function () {
runslide();
});
});
});
}
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;
});
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.