We Keep Coding

Add delay to JS animated text?

So I have the code below for a auto typing text animation. The text is in front of a image and I want people to see the full picture first and then the text starts to "type". I guess the best way is to add a 2-3 seconds delay before the text starts to animate but I'm not really sure how to do that.
Help would be very much appreciated. Thanks!
function cursorAnimation() {
$('#cursor').animate({
opacity: 0
}, 'fast', 'swing').animate({
opacity: 1
}, 'fast', 'swing');
}
$(document).ready(function() {
setInterval('cursorAnimation()', 1000);
});
var text = 'TEXT GOES HERE';
$.each(text.split(''), function(i, letter) {
setTimeout(function() {
$('#container').html($('#container').html() + letter);
}, 110 * i);
});

Adding some arbitrary delay is NOT the best way. You never know how much time an image will take to load on different kinds of networks, some are very fast, others might be very slow.
Instead you should fire your code on some event e.g. when the image has loaded. You can run your code on window load as an option as shown below:
function cursorAnimation() {
$('#cursor').animate({
opacity: 0
}, 'fast', 'swing').animate({
opacity: 1
}, 'fast', 'swing');
}
$(document).ready(function() {
setInterval('cursorAnimation()', 1000);
$(window).on("load", function(){
// do here tasks that you want to run after all page assets e.g. images have been loaded
showText();
});//window load()
});
function showText() {
var text = 'TEXT GOES HERE';
$.each(text.split(''), function(i, letter) {
setTimeout(function() {
$('#container').html($('#container').html() + letter);
}, 110 * i);
});
}

Try using setTimeout() function to call your function after some time i.e
$(document).ready(function() {
setTimeout(yourfunction(), 1000); //changes milliseconds as per your need.
})
https://www.w3schools.com/jsref/met_win_settimeout.asp

Generaly. It is done that you pack delayed code into callback and that callback you pass into setTimeout method. For preserving functionality while working in objects. I recomentd to call bind(this) on packaged callback.
setTimeout(function () {
console.log("Delayed message");
}.bind(this), 3000);
In your case
function cursorAnimation() {
$('#cursor').animate({
opacity: 0
}, 'fast', 'swing').animate({
opacity: 1
}, 'fast', 'swing');
}
$(document).ready(function() {
setInterval('cursorAnimation()', 1000);
});
var text = 'TEXT GOES HERE';
setTimeout(function () {
// delayed code
$.each(text.split(''), function(i, letter) {
setTimeout(function() {
$('#container').html($('#container').html() + letter);
}, 110 * i);
});
// end of delayed code
}.bind(this), 3000);

document.getElementById("st").click(); not working

I want to click a button automatically on every page refresh.But when i have the window.location.reload function the button click is not happening.I am really confused on this one.What to do to get a button clicked automatically on page refresh?
window.setTimeout(function () {
window.location.reload();
repeat();
}, 2000);
function repeat(){
document.getElementById("st").click();
}

window.setTimeout(function () { repeat();
window.location.reload();
}, 2000);
Call repeat before reload function.

This is working!
document.getElementById("st").onclick = function() {
alert('Clicked');
};
window.setTimeout(function() {
window.location.reload();
repeat();
}, 2000);
function repeat() {
document.getElementById("st").click();
}
<div id="st">Div</div>

How to detect whether mouseout is true or not?

I have this simple fiddle as a working example-
Jsfiddle
I am trying to detect mouseout event from a div section.
When i mouseover on this image it shows caption; saying "Change Image". After 5 seconds caption goes fadeOut.
I am using setInterval to set it accordingly. Now if I do mouseout of this image, then only I want Interval function should be called.
How do i detect mouseout event in jQuery?
Tried-
$(function () {
$('.image-profile').mouseover(function () {
$('.change-image').stop().show();
if ($('.image-profile').mouseout()== true) {
TimeOut();
}
});
setInterval(function TimeOut() {
$('.change-image').fadeOut()
}, 5000
);
});

var ImageProfileTimer;
$('.image-profile').on('mouseenter',function(){
clearTimeout(ImageProfileTimer);
$('.change-image').stop().show();
}).on('mouseleave',function(){
ImageProfileTimer = setTimeout(function(){
$('.change-image').fadeOut()
}, 5000);
});
Use setTimeout and clearTimeout
Demo : http://jsfiddle.net/xMNTB/9/

$('.image-profile').on('mouseleave', function() {
setTimeout(function() {
$('.change-image').fadeOut()
}, 5000);
});

http://jsfiddle.net/xMNTB/7/
Now the div show up on mouse enter and disappears 5 seconds after mouse leave.
$(function () {
$('.image-profile').mouseenter(function () {
$('.change-image').stop().show();
});
$('.image-profile').mouseleave(function () {
setTimeout(function TimeOut() {
$('.change-image').fadeOut()
}, 5000);
});
});

Try This:
(function () {
$('.image-profile').mouseover(function () {
$('.change-image').stop().show();
if ($('.image-profile').mouseout() == true) {
TimeOut();
}
}).mouseout(function () {
setInterval(function TimeOut() {
$('.change-image').fadeOut()
}, 5000);
});
});
JSFIDDLE DEMO

How to change few css class on button in jQuery by timer?

When document is ready, there is a button that gets a new class names frame1. I want to set another class on this button after two seconds.
$(document).ready(function () {
setTimeout(function () {
$('#button').addClass('frame1')
}, 2000);
});
I want to add another class 'frame2' after two seconds if that is possible?

If you just want to add a class every coule of seconds until you have no more classes to add, you could use an interval and then clear it when the classes have all been added:
var group = [ 'whiteFG', 'redBG' ];
var intvl= setInterval(function(){
group.length
? $("#foo").addClass(group.pop())
: clearInterval(intvl) ;
}, 2000);
Fiddle: http://jsfiddle.net/EvXPy/
Or you could simply iterate over your array of class names and set timeouts from there:
$(['redBG','whiteFG']).each(function(i,o){
setTimeout(function(){
$("#foo").addClass(o);
}, i * 2000 );
});​​​​​​​​
Note that the first effect will run immediately since i is equal to the index of 0, meaning the timeout happens instantly. If you want this to be delayed, you can increment i as you see fit before multiplying by 2000.
Fiddle: http://jsfiddle.net/EvXPy/1/

You can do it this way.
$(document).ready(function () {
setTimeout(frame1(), 2000);
});
function frame1() {
$('#button').addClass('frame1');
setTimeout(frame2(), 2000);
}
function frame2() {
$('#button').addClass('frame2');
}
Or you could do it this way.
$(document).ready(function () {
setTimeout(function () {
$('#button').addClass('frame1')
}, 2000);
setTimeout(function () {
$('#button').addClass('frame2')
}, 4000);
});

setTimeout(function () {
$('#button').addClass('frame1');
}, 2000);
setTimeout(function () {
$('#button').addClass('frame2');
}, 2000);
UPDATE:
If you want to check whether class is exists then do this way.
setTimeout(function () {
$('#button').addClass('frame1');
if($('#button').hasClass('frame1')) {
setTimeout(function () {
$('#button').removeClass('frame1').addClass('frame2');
}, 2000);
}
}, 2000);
Refer LIVE DEMO

setInverval and delay

I am trying to make a div bounce every 4 seconds and after 15 seconds fadeOut. The code bellow makes the div disappear and the bounce doesn't happen.
$(document).ready(function(){
function salta() {
$('.recomenda').effect("bounce",{ times:4 },300);
}
setInterval(salta, 4000);
$('.recomenda').delay(15000).fadeout('slow');
});
This isn't doing the job, any hint you can give me?
Kind regards.
With the help of Matt i figured how to do it:
function salta() {
$('.recomenda').effect("bounce",{ times:4 },300);
}
var interval = setInterval(salta, 3500);
setTimeout(function (){
clearInterval(interval);
$('.recomenda').fadeOut('slow');
}, 15000);

Edit - final version
$(document).ready(function ()
{
var $recomenda = $('.recomenda');
function salta()
{
$recomenda.effect('bounce', {times:4}, 300);
}
salta();
var interval = setInterval(salta, 4000);
setTimeout(function ()
{
// stop the interval from running unnecessarily
clearInterval(interval);
$recomenda.fadeOut('slow');
}, 15000);
});
There were 2 other problems:
fadeout() instead of fadeOut()
Using .delay() was interfering with the bounce effect
Demo: http://jsfiddle.net/mattball/a2F3W/