Applying javascript fade-in on 4 divs with a 2 second span
I am trying to apply javascript fade-in to 4 divs on a page named div1 div2 div3 and div4 (the original I know) However, I cannot get the code below to work. I also need each of them to fade out in order to have a 2 second gap between them. Can someone please show me how? This tiny code is driving me crazy now!
$(document).ready(function() {
$('#div1,div2,div3,div4').ready(function() {
$(this).css('opacity', .4).fadeTo(2000, 1.0);
}).ready(function() {
$(this).fadeTo(2000, 0.4);
});
});
+3
source to share
4 answers
This reduces the transparency of # div1, # div2, # div3 and # div4 to 0 in 2 seconds with a delay of 2 seconds.
$(document).ready(function() {
$('#div1').delay(2000).fadeTo(2000, 0);
$('#div2').delay(4000).fadeTo(2000, 0);
$('#div3').delay(6000).fadeTo(2000, 0);
$('#div4').delay(8000).fadeTo(2000, 0);
});
+2
source to share
Another simple version that fades out at 2 second intervals:
$(function() {
$('#div1, #div2, #div3, #div4').each(function(i) {
$(this).delay(i * 2000).fadeIn(1000);
});
});
Demo: http://jsfiddle.net/zno1bw91/1/
+1
source to share
Your code works fine on my end, only one error: you are not selecting the div correctly. Here is your code
$(document).ready(function() {
$('#div1,#div2,#div3,#div4').mouseover(function() {
$(this).css('opacity', .4).fadeTo(2000, 1.0);
}).mouseout(function() {
$(this).fadeTo(2000, 0.4);
});
});
0
source to share
/**
* This function apply fadeIn to N elements with given interval speed
*
* @requires jQuery 1.x.x or higher
*
* @param {Array} elementsSelectors - list of selectors
* @see
* fadeInInterval(['#div1', '#div2'], 2000);
*
* @param {Number} intervalMs - the interval between fadeIn's
* @param [{Number}] fadeInSpeed - fadeIn speed
* @param [{Boolean}] reverse - Reverse the direction of element foreaching to fadein.
* By default is false
*
* returns {Function} - if call this function you will cancel the interval
* @see
* var cancel = fadeInInterval(['#e1', '#e2', '#e3', '#e4'], 2000, 300, true);
* //some on mouseOut event callback
* $(element).on('mouseout', function() {
* cancel();
* })
*/
function fadeInInterval(elementsSelectors, intervalMs, fadeInSpeed, reverse) {
$(elementsSelectors[reverse ? 'pop' : 'shift']()).stop().fadeIn(fadeInSpeed || 300);
var intervalId = setInterval(function () {
$(elementsSelectors[reverse ? 'pop' : 'shift']()).stop().fadeIn(fadeInSpeed || 300);
if (!elementsSelectors.length) {
clearInterval(intervalId);
}
}, intervalMs);
return function() {
clearInterval(intervalId);
};
}
//Simple usage:
var cancel = fadeInInterval(['#div1', '#div2', '#div3', '#div4'], 2000);
//Prevent cycle
cancel();
0
source to share