We Keep Coding

jQuery show div for 2 seconds then hide for 4 seconds in a loop [duplicate]

This question already has answers here:
What is the difference between a function call and function reference?
(6 answers)
Closed 5 years ago.
How to show a div for 2 seconds and then hide it for 4 seconds in an infinite loop? I use jQuery's animate() function because I want to use CSS transitions too.
function animatedText() {
setTimeout(function() {
$('.text').animate({ opacity: 1 }, 200, function() {
setTimeout(function() {
$('.text').animate({ opacity: 0 }, 200);
}, 1800);
});
}, 3800);
}
setInterval(animatedText(), 6000);
Here is my fiddle : https://jsfiddle.net/od6gm8t3/

I hope this will help you. Please check below code.
function animatedText() {
$('.text').animate({ opacity: 1 }, 200, function() {
setTimeout(function() {
$('.text').animate({ opacity: 0 }, 200);
}, 2000);
});
setTimeout(function() {
animatedText();
},6000);
}
animatedText();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<i class="text">Animated Text</i>

Delay of a few seconds before display:none [duplicate]

This question already has answers here:
Hide div after a few seconds
(9 answers)
Closed 8 years ago.
I don't know how to achieve that display: none works not immediately.
I need #popUpBox to disappear after a few seconds.
$(document).bind("mousedown", function(){
$('#popUpBox').css({'display':'none'});
jQuery(function($) {
var $txt = '';
$('.selectiontext').bind("mouseup", function(e){
if (window.getSelection){
$txt = window.getSelection();
}
else if (document.getSelection){
$txt = document.getSelection();
}
else if (document.selection){
$txt = document.selection.createRange().text;
}
else return;
if ($txt!=''){
$('#popUpBox').css({'display':'block', 'left':e.pageX+5+'px', 'top':e.pageY+0+'px'});
}
});
$(document).bind("mousedown", function(){
setTimeout(function() {
$('#popUpBox').css({'display':'none'});
}, 2000);
});
Unfortunately, when i select text, now always #popUpBox disappears and i need only when selection is disabled

The following code will hide the div after 2 seconds
$("#popUpBox").delay(2000).hide();
If you want animation, you can use fadeOut method as well
$("#popUpBox").delay(2000).fadeOut('fast');

Try to use the setTimeout function.
$(document).bind("mousedown", function(){
setTimeout(function() {
$('#popUpBox').css({'display':'none'});
}, *time you want(int)*);
});
Edit : To your new question
Add a if statement when selection is disabled. Here :
$(document).bind("mousedown", function(){
*if statement*
setTimeout(function() { (...)
Because it's bound to the entire document, it will always hide the box without any condition.

Try this if you want the function to trigger a few seconds after the mousedown event:
$(document).bind("mousedown", function(){
setTimeout(function() {
$('#popUpBox').css({'display':'none'});
}, 5000);
});
Readup on setTimeout here and here. Basically, setTimeout() allows you to pass a function and then an interval (in milliseconds) to wait before executing that function.
Edit (for update): To only have this happen when there is no selection, try:
$(document).bind("mousedown", function(){
if (!window.getSelection) {
setTimeout(function() {
$('#popUpBox').css({'display':'none'});
}, 5000);
}
});

jQuery - Waiting 2 seconds before hiding [duplicate]

This question already has answers here:
Add delay before .hide() w/jQuery
(2 answers)
Closed 8 years ago.
So, in my code the function is supposed to make #aboutPopOut slide to the left and then after 2 seconds, the fadescreen to .hide(). The sliding works, but the waiting and hiding does not. Here is my function;
function aboutHide() {
$("#aboutPopOut").animate({ left: "-60%" }, 500);
setTimeout(function() {
$("#fadeScreen").wait(2).hide();
}, 500);
};
Please help me figure out what is wrong. All responses will be appreciated.

You are looking for the .delay method. You also have to pass a number to .hide to make it an animation method, otherwise .delay has no effect.
$("#fadeScreen").delay(2000).hide(0);

try this
function aboutHide() {
$("#aboutPopOut").animate({ left: "-60%" }, 500);
setTimeout(function() {
$("#fadeScreen").delay(2000).hide();
}, 500);
};

Update the following..
function aboutHide() {
$("#aboutPopOut").animate({ left: "-60%" }, 500);
setTimeout(function() {
$("#fadeScreen").delay(2000).hide();
}, 500);
};

setTimeout only works under 1000ms

I want to have a timeout function so when a form is submitted the alert is displayed two seconds after the submit. The code I am using doesn't work:
$(document).ready(function() {
$("#newsletter").submit(function() {
setTimeout(function() {
alert("submitted");
}, 2000);
});
});
But when I change the 2000ms to 900 is seems to work fine:
$(document).ready(function() {
$("#newsletter").submit(function() {
setTimeout(function() {
alert("submitted");
}, 900);
});
});
How can I get the 2000ms to work?

The only possible reason for this is that your form is getting submitted and the user is taken to the new page (the form's action) before the 2 seconds elapse.
As suggested in Thilo's comment, if showing the alert is unavoidable, submit it via AJAX so that the current page (containing the code to alert) remains intact and therefore executes.

You can use like this. The problem with your original code was that, it got submitted before the alloted time.
$(document).ready(function() {
$("#newsletter").submit(function(e) {
e.preventDefault();
setTimeout(function() {
alert("submitted");
}, 2000);
});
});

You could change your code to this:
$(document).ready(function() {
$("#newsletter").submit(function(event) {
var element = this;
event.preventDefault();
setTimeout(function() {
alert("submitted");
//rest of the code
element.submit();
}, 2000);
});
});
Snippet:
$(document).ready(function() {
$("#newsletter").submit(function(event) {
event.preventDefault();
var element = this;
setTimeout(function() {
alert("submitted");
element.submit();
}, 2000);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form style="width:440px;" action="./" method="post" id="newsletter">
<input type="text"/>
<input type="submit" value="Submit"/>
</form>

JavaScript error in IE8 [duplicate]

This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
window.onload() is not firing with IE 8 in first shot
I am getting a error while running the code in JavaScript on line 20. The line 20 code is just here:
window.onload = setTimeout( function(){
$('#notification_div').slideUp(2000);
} , 6000);

event handler should be a function,
window.onload = function() {setTimeout( function(){
$('#notification_div').slideUp(2000);
} , 6000);};
as you using jquery, may be better to
$(window).load(
function() {
setTimeout( function(){
$('#notification_div').slideUp(2000);
} , 6000)
}
);

I believe what you want is this
window.onload = function(){
setTimeout( function(){
$('#notification_div').slideUp(2000);
} , 6000);
}

Well you are missing the function in the .onload:
window.onload = function(){ //<-------missing this
setTimeout( function(){
$('#notification_div').slideUp(2000);
} , 6000);
};
Why not use the jquery version of .load():
$(window).load(function(){
setTimeout( function(){
$('#notification_div').slideUp(2000);
} , 6000);
});