Jquery fadeout speed won't apply - javascript

I have a problem with the jquery fadeout. I tried to set 3000 Milliseconds but it won't apply
I use:
$('#alertSuccess').fadeOut('3000', function() {
document.getElementById("alertSuccess").style.display = "none";
});
but it still disappears very very fast ( i guess the default 400milli seconds)..
Anyone know why?

Try using this code:
html:
<div id="box1" class="box">linear</div>
Then use this script
$(document).ready(function() {
function complete() {
document.getElementById("alertSuccess").style.display = "none";
}
$("#box1").fadeOut(3000,complete);
});
you can check this code on http://jsfiddle.net/FLARH/

.fadeOut(3000, function() { ... }

Related

Jquery Display Div with Interval

I am looking to hide several divs one by one or with a time interval of 5 seconds, i tried below doesn't seem to work though
<div id="container">
<div id="data1">123</div>
<div id="data2">456</div>
<div id="data3">789</div>
<div id="data4">012</div>
</div>
<script>
$('document').ready(function(){
window.setTimeout('mytimer()',5000);
});
$('document').ready(function(){
window.setTimeout('mytimer2()',10000);
});
$('document').ready(function(){
window.setTimeout('mytimer3()',15000);
});
$('document').ready(function(){
window.setTimeout('mytimer4()',20000);
});
function mytimer(){ $('#data1').hide(); }
function mytimer2(){ $('#data2').hide(); }
function mytimer3(){ $('#data3').hide(); }
function mytimer4(){ $('#data4').hide(); }
</script>
I would use single timeout function as your are hiding at regular intervals. There is one mistake in your code you need to pass the reference of function to setTimeout instead of passing the function call as a string.
Live Demo
window.setTimeout(mytimer,1000);
index = 1;
function mytimer()
{
$('#data' + (index++)).hide();
if(index <= 4) window.setTimeout(mytimer,1000);
}
You need to use $(document) instead of $('document')
$('document') will look for HTML Element with document tag, which doesn't exist.
Learn to use developer tools, Here's a good read: How to open the JavaScript console in different browsers?
Code
$(document).ready(function(){
window.setTimeout(mytimer,5000); //You can simply pass the function reference
window.setTimeout(mytimer2,10000);
window.setTimeout(mytimer3,15000);
window.setTimeout(mytimer4,20000);
});
Try it this way:
$(document).ready(function(){
window.setTimeout(mytimer, 5000);
window.setTimeout(mytimer2, 10000);
window.setTimeout(mytimer3, 15000);
window.setTimeout(mytimer4, 20000);
});
function mytimer(){
$('#data1').hide();
}
function mytimer2(){
$('#data2').hide();
}
function mytimer3(){
$('#data3').hide();
}
function mytimer4(){
$('#data4').hide();
}
Well you can use setInterval function too for this and once all the elements have been hidden you can clearInterval like one below:
DEMO HERE
function mytimer(elem){
console.log('came here');
$(elem).hide();
}
$(document).ready(function(){
var i=0;
var interval=null;
interval = window.setInterval(function(){
i++;
if(i<=$('#container').children().length)
mytimer("#data"+i);
else
{
clearInterval(interval);
return;
}
},5000);
});
Try this change and so on for the rest:
window.setTimeout(mytimer, 5000);// removed quotes and `()`
Another solution using jQuery fadeOut():
$(function() {
for (var i = 1; 4 >= i; i++)
$('#data' + i).fadeOut(5000 * i);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="container">
<div id="data1">123</div>
<div id="data2">456</div>
<div id="data3">789</div>
<div id="data4">012</div>
</div>
Use .delay() in jquery . No Settimeout function needed.
$('#data1').delay(5000).hide('fast');
$('#data2').delay(10000).hide('fast');
$('#data3').delay(15000).hide('fast');
$('#data4').delay(20000).hide('fast');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div id="data1">123</div>
<div id="data2">456</div>
<div id="data3">789</div>
<div id="data4">012</div>
</div>
There are multiple errors in your code.
You have used $('document').ready(function(){}), which is incorrect. document is a keyword, it shouldn't be in quotes.
You don't have to use multiple instance of calling $(document).ready(). You can call all your statements from a single function. You can also use $(function(){}).
While calling the function name inside the timeout function, you shouldn't put them under quotes. They act like keywords after you have defined them in your code. The function call inside the Timeout function shouldn't be followed by (). So it should be window.setTimeout(mytimer,5000);
Please refer the fiddle : http://jsfiddle.net/65gs8s9y/
I have modified your code which works fine now:
$(document).ready(function(){
window.setTimeout(mytimer,5000);
window.setTimeout(mytimer2,10000);
window.setTimeout(mytimer3,15000);
window.setTimeout(mytimer4,20000);
});
function mytimer(){
$('#data1').hide();
}
function mytimer2(){
$('#data2').hide();
}
function mytimer3(){
$('#data3').hide();
}
function mytimer4(){
$('#data4').hide();
}

Removing an Ajax loader image after sometime

I have an ajax loader that appears after a button is clicked with the following code:
jQuery(document).ready(function($){
{
$.getElementById('form').onsubmit = function () {
$.getElementById('submit').style.display = 'block';
$.getElementById('loading2').style.display = 'block';
};
}(document));
});
HTML:
<input type="submit" class="button alt" onclick="$(\'#loading\').show();" name="woocommerce_checkout_place_order"/>'
I would like the ajax loader to disappear after like 10seconds.
Please let me know
You can use this to hide your loader after 10 seconds.
setTimeout(function() {
$('#loading').hide(); // I wasnt sure which one you wanted to hide
$('#loading2').hide();
}, 10000);
Also looking at your code im not sure if that would have worked anyway. Also if you are using jQuery then you don't really need to use vanilla Javascript so your code could be changed to this.
jQuery(document).ready(function($){
$('#form').submit(function () {
$('#submit').css('display', 'block');
$('#loading2').css('display', 'block');
});
});
$(function() {
// setTimeout() function will be fired after page is loaded
// it will wait for 10 sec. and then will fire
// $("#successMessage").hide() function
setTimeout(function() {
$("#loading").hide('blind', {}, 500)
}, 10000);
});
Note: In order to make you jQuery function work inside setTimeout you should wrap it inside
function() { ... }

slideUp is not working

following is my code. slideDown is working fine , but slideUp is not working. what is the mistake in my code.
var a=0;
$(document).ready(function() {
$("#login").click(function(){
if (a==0){
$("#banner").slideDown("slow");
a=1;
} else {
$("#banner").slideUp("slow");
a=0;
}
});
});
Why don't you use the slideToggle() function within jquery?
Description: Display or hide the matched elements with a sliding
motion.
I just tried your code in jsfiddle.net and it works perfect (slideUP and slideDown)
Test it
You can just use the slideToggle function to achieve your result:
$(function() {
$("#login").click(function() {
$("#banner").slideToggle("slow");
});
});
However, your code looks like it should work, unless a is modified elsewhere (which is entirely possible since it's a global variable), if you wish to continue to use slideUp and slideDown try correcting the scope of a (and possibly giving it a more meaningful name) like so:
$(document).ready(function() {
var isUp = true
$("#login").click(function(){
if (isUp){
$("#banner").slideDown("slow");
isUp = false
} else {
$("#banner").slideUp("slow");
isUp = true;
}
});
});

Getting jquery to delay after adding a class

I want a script to halt before continuing after adding a class, below are two attempts that seem to fail.
window.setTimeout($("#"+item).addClass("highlight"), 5000 );
$("#"+item).addClass("highlight").delay(5000);
Where am I going wrong here?
Another way:
$("#"+item).addClass("highlight");
setTimeout(function(){
//rest of the code
}, 5000);
You want something like:
function addClassAndDelay(item, nextMenu) {
$("#"+item).addClass("highlight");
window.setTimeout(function() { restOfCode(nextMenu); }, 5000);
}
function restOfCode(nextMenu) {
jQT.goTo('#'+nextMenu, 'slide');
}
May be you are looking for the jQuery Highlight plugin?
$("#mydiv").click(function () {
$(this).effect("highlight", {}, 3000);
});

jQuery fadeOut one div, fadeIn another on its place

I'm trying a simple jQuery script to fadeout one div and fadein another one in it's place but for some reason the first div never fades out. It's probably an obvious problem with the code but I cannot seem to make it out.
<style>
#cuerpo { display: none; }
</style>
<div id="cuerpo"></div>
<div id="inicio"></div>
<script>
function delayed() {
$("div").fadeIn(3000, function () {
$("cuerpo").fadeIn("slow");
});
}
$("a").click(function () {
$("inicio").fadeOut("slow");
setTimeout("delayed()",500);
});
</script>
How should I do it? What am I doing wrong?
UPDATE
The simplest way to do this is by using a callback:
$('a').click(function(){
$('#fadeout').fadeOut(300, function () {
$('#fadein').fadeIn(300);
});
});
then the HTML:
In/Out
<div id="fadeout">Fade Out</div>
<div id="fadein" style="display:none;">Fade In</div>
OLD:
There is a simple way to do this:
$('a').click(function(){
$('#fadeout').fadeOut(300);
$('#fadein').delay(400).fadeIn(300);
});
I think you can use callback...
$('#fadeout').fadeOut(300, function(){
$("#fadein").fadeIn(300);
});
this is the most stable way....
There is a syntax error
it should be
$("#inicio").fadeOut("slow");
and not
$("inicio").fadeOut("slow");
Similarly
$("#cuerpo").fadeIn("slow");
and not
$("cuerpo").fadeIn("slow");

Categories

Resources