Update: March 3rd, 2012: the code below is simple and will do the job. But if you’re looking for something more dynamic, please see this code’s update. It still uses jQuery, but uses a for() loop to make things dynamic. A detailed screencast tutorial on how to create a JavaScript for() loop is included as well!
Clients looooooove images that fade in and fade out on home pages. Flash was once the main tool of choice for this but jQuery now lets us do it with less code and guarantees that things will show up on multiple devices, iPhones included.
I had to do this recently for the project I mentioned in my previous post. You can view the end-result of this over at the Almay site.
Here’s how I did it:
<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<meta charset="UTF-8" />
<title>A Simple jQuery Fade In/Fade Out</title>
<style>
#picOne, #picTwo {
position:absolute;
display: none;
}
#pics {
width:100px;
height:100px;
}
</style>
<script src="http://code.jquery.com/jquery-1.4.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#picOne').fadeIn(1500).delay(3500).fadeOut(1500);
$('#picTwo').delay(5000).fadeIn(1500);
});
</script>
</head>
<body>
<div id="pics">
<img src="firstPic.gif" width="100" height="100" id="picOne" />
<img src="secondPic.gif" width="100" height="100" id="picTwo" />
</div>
</body>
</html>Let’s review the specific parts of the code that make the fade in/fade out work…
We create unique CSS IDs for each of our two images. They need to be hidden when the page first loads and also need to be stacked one on top of the other, so we respectively use display:none and position:absolute. We also need to create a containing <div> for our images, so we create a unique CSS ID called “pics”:
<style>
#picOne, #picTwo {
display: none;
position:absolute;
}
#pics {
width:100px;
height:100px;
}
</style>
We have to embed the jQuery library into our web page…in this case, I embedded the one hosted over at jQuery.com:
<script src="http://code.jquery.com/jquery-1.4.4.min.js" type="text/javascript"></script>
As soon as the page is loaded, the jQuery .fadeIn() function fades in our first image in 1500 milliseconds (or, 1.5 seconds). The .delay() function acts as a counter and waits 3500 milliseconds (or, 3.5 seconds), then the .fadeOut() function fades it out in 1500 milliseconds (or, 1.5 seconds).
$('#picOne').fadeIn(1500).delay(3500).fadeOut(1500);
At the same time that the first image is doing its thing on page load, the .delay() function makes the second image wait 5 seconds before the .fadeIn()function fades it in in 1.5 seconds.
$('#picTwo').delay(5000).fadeIn(1500);
We place our two images in our “pics” <div> tag. The images and <div> tag are of equal width and height. And since the images were styled with position: absolute, they will be stacked one on top of the other. Whichever one is listed first is the one on top:
<div id="pics"> <img src="firstPic.gif" width="100" height="100" id="picOne" /> <img src="secondPic.gif" width="100" height="100" id="picTwo" /> </div>
That should do it…but let me make two points:
- I used transparent GIFs for this because transparent PNGs looked weird when they faded in and out. Of course, you can use a JPEG if your images don’t need to be transparent.
- Properly syncing the various fades took a little planning. Note the combined time for .fadeIn() and .delay() for the first image is five seconds, equal to the timing on the .delay() for the second image. Also note that the first image takes 1.5 seconds to fade out while the second one takes the same amount of time to fade in. This keeps everything neat.
My HTML5 video posts are coming soon but another short jQuery-related post is coming next.
Yup, that's me in a vain attempt at trying to look cool. I'm a front end web developer at Revlon and enjoy learning new aspects of web development & design and use this blog to track my learning progress. Besides that, I love my wife and son, love traveling and am a huge soccer fan. I always prefer it if you refer to soccer as either 'football' or 'footie'.
Great post! thanks for making this so simple to follow. Keep up the great work.
YW! Thanks for stopping by!
This was so much help! I edited the code to have three panels of one image fade, it looks wonderful.
Thanks!!
Hi Meghan. Thanks for the kind words as well as stopping by! It keeps me going!!
Hi, this is such a great tutorial. So much easier than the hundreds of others ive tried. Thanks so much. I just wondered how to repeat the fading so its looped. At the moment it stops on the last image but i need it to start again. Thanks
Hi Terry. Thanks for stopping by!
As far as creating the code from the ground up, I’m “guessing” that either a jQuery or JavaScript counter will need to be attached to the code. After it counts up to a certain limit, it restarts.
But if you don’t want to code it from the ground up (which I think is fine), I would suggest checking out the jQuery Cycle plug-in to get the effect that you want. It’s wonderful!!!
Hope this helps!
-kaidez
Thanks Kaidez. you have been a great help! keep up the amazing work you are doing
Thanks VERY much for you kind words, Terry. They keep me going!
Is there any way more than two images can be use. How about 18 images that keep fading from 1-18 then start over again? I see you have “picOne” and “picTwo”, would I have to type in the full 18 lines of commands into the java script code then a command for repeating?
Hey HG. Thanks for stopping by!
You can add as many images as you want to the script, naming them “picThree,” “picFour,” etc. If you want them to repeat after all 18 have appeared, I would check out the jQuery Cycle plug-in.
18 images are lot and, depending on the size of the images, may slow down your site load time. You may want to preload them: this script over at Dreamers is pretty good for this and quite simple!
HTH,
kaidez
You know you said you need the jquery plugin to enable your images to run on a loop, what do you do with this plugin? do you embed it into the script? if so where?
Great stuff by the way.
RJ
Hi Rebecca. You don’t need a plugin for the code in the tutorial. I was referring to jQuery Cycle or the Dreamers code if the fading in and out functionality was more complicated.
great tutorial! It worked like a charm for a little intro I’ve been working on ( I really wanted to avoid using flash) my question is though is there a way to fade in an entire page after I fade in and out a cycle of images?
Hi Erin…thanx for your kind words!
I think that the best way to achieve your task is to do the following:
-put all the content you want to fade in after the image cycle ends into a single <div> tag.
-set up your CSS so that this single <div> tag is invisible when it loads.
-add extra code to the jQuery “chain” that fades in the <div> tag after the two fade in/fade out images have done what they’re supposed to do.
So the style tag would now look like this:
<style>
<!-- 'pageWithStuff' is the div tag with all the other page content -->
#picOne, #picTwo, #pageWithStuff {
position:absolute;
display: none;
}
#pics {
width:100px;
height:100px;
}
#pageWithStuff {
width:600px;
height:600px;
background-color: blue;
}
</style>
The jQuery statement would now look like this:
<script>
$(document).ready(function() {
$('#picOne').fadeIn(1500).delay(3500).fadeOut(1500);
$('#picTwo').delay(5000).fadeIn(1500);
$('#pageWithStuff').delay(6500).fadeIn(1500);
});
</script>
And content in between the body tags would now look something like this:
<div id="pageWithStuff">
Put your page content here
</div>
<br /><!-- you probably don't need this break tag, but I put here in case you wanted to test it and see how things looks-->
<div id="pics">
<img src="firstPic.gif" width="100" height="100" id="picOne">
<img src="secondPic.gif" width="100" height="100" id="picTwo">
</div>
Super important point: the CSS above only applies to the fade in/fade out functionality, but contains no serious styling. You’ll need a respectable amount of precise CSS positioning to get things to look they way you want them to.
Also, depending on the amount of content in the ‘pageWithStuff’ div, things may seem a little slow and top-heavy. Test things out as much as you can. If the div tag contains a lot of images, consider displaying them with CSS image sprites.
Hope this helps…lemme know if you have more questions!
kaidez
This is just what I needed for an intro I am working on. Everything else I found online was soooo complicated. Thank you for putting in the complete code and also explaining every part of it!! BRILLIANT!!!
Hi SMCG…thanx! That’s what I was hoping to acheive!!
-k
Hello,
I am such a novice. I am trying to work on my website. I want the pic and text effect. I just don’t know how/ when/ where to put the pic and text in the code. Can you help me?
Warning you are talking to someone that doesn’t understand remotely what you might say. So please break it down to me as if I am 3 yrs old.
Much appreciated!
Hi Keya. If you’re referring to the code example that I wrote for Erin above, then in the scope of this tutorial, I would put the code in both the <style> and <script> tags in between the <head> tags. Again, this is “in the scope of this tutorial”, I’ll come back to this in the end.
RE: the code block that starts with “<div id=”pageWithStuff”>,” that goes inside the <body> tags but in this case, I positioned both the text and images in a very simple manner, just so the results would be easy to see. In truth, the text should probably have been positioned underneath the images, which requires some fairly hefty CSS code.
This is cool effect so what I’m going to try and do is create a new tutorial for this in less than a week. And, again, in the scope of this tutorial, it was written in a way that was easy to explain. There are some best practices that should be applied to this code block, this upcoming tutorial will address that.
Past this, if you have written code for this already on yur own, please feel free to post it here and I’d be more than happy to take a look at it.
-kaidez
Kaidez,
Thank you very much for a very helpful tutorial. I’ve been doing some research on jQuery, trying to find a way to use your fading script in combination with easing the object into the canvas…. So far the only solutions I Found are the ones which have a trigger (“click here” for example) that launches the action. I’m looking for a script that will move graphics while fading in automatically.
Do you have any suggestions?
Thank you!
Hi Katya. Sorry that I’m just getting back to you.
Do you still need help? If yes, would you mind posting what you’ve done so far?
Hi kaidez.
The code works great!
Im wondering one thing thou. What i did was i took a black and white photo and faded it into a “color” image on page load, and this looks nice. I want to keep that effect + when i hover or click a link on the page i want the same photo to fade to black and white again. Is that possible ?
Thank you in advance!
Robin
though
Oh.. some code maby.
HTML:
homepage
$(document).ready(function() {
$(‘#picOne’).fadeIn(5800).delay(3500).fadeOut(5800);
$(‘#picTwo’).delay(5000).fadeIn(5800);
});
<a href="ftp://xxx.xxx.xxx.xxx/" class="login"
CSS:
body {background-color:#010101;}
a img {border: none; }
a {color: #010101; }
a : visited {color: #010101; }
a : hover {color: #010101; }
#picOne, #picTwo {
display: none;
position:absolute;
top: 3px;
left: 50%;
margin-left: -300px;
}
#pics {
width:100px;
height:100px;
}
.login {
width: 86px;
height: 30px;
display:block;
position:absolute;
top: 570px;
left: 50%;
margin-left: -43px;
background-image: url(‘login.jpg’);
I LOVED your tutorial and the simple (and easy) way the code is written.
It was simple to understand for a beginner like me… i have used this fade in fade out for the texts, it has come out well but some other issue has come up… i have build ma page with tables and there are totally three rows. when the first text content comes the arrow which is in the 3rd row appears closer and then get backs to its original place after the second content comes. how to make it static?? help me soon
Hi Subha. Thanks for stopping by!
I’m sorry to hear that you’re having trouble; would you mind sharing your code?
Thanx!
k
INTRODUCTION TO SCORM
$(document).ready(function() {
$(‘.content’).fadeIn(1500).delay(3500);
$(‘.bullets’).delay(5000).fadeIn(1500);
});
INTRODUCTION TO SCORM
Module Objectives
Welcome to the course on “SCORM Guide for Content Developers” This course contains three modules:
Introduction to SCORM, designing SCO’s and sequencing content in SCORM.In this module on “Introduction to SCORM,” you will learn:
What is SCORM
The need for SCORM
What is SCO
Hey Subha. Could you also please include the HTML body code. Especially the HTML body code where both ‘.content’ and ‘.bullets’ are being referenced?
Thanks!
-k
Thanks for such a great code!
Kaidez, is there a way to have more than one slide show on the same page??? I would like to have three slide shows, all at different speeds….. would this require three different scripts?
Many thanks
D
Thanks for such a great code!
Kaidez, is there a way to have more than one slide show on the same page??? I would like to have three slide shows, all at different speeds….. would this require three different scripts?
Many thanks
D
Hey Kaidez. thanks for everything we used it on this site, http://geniusmindcontrol.com if you care to look. My question is, if you see how I made it work, what if after the coming soon text appears, is it possible to fade those two pictures out, and fade in a video clip?
Hi Dav…thanks much!
Yes, you can have more than one slide show on the page, but you will need three different scripts per slide show. I am, however, working on some code that does the same effect as this tutorial, but is more dynamic….will shoot out message on this page when it’s done.
-kdz
.content {
font-family:Arial, Helvetica, sans-serif;
font-size:15px;
padding-left:10px;
}
.bullets
{
font-family:Arial, Helvetica, sans-serif;
font-size:15px;
padding-top:10px;
padding-left:80px;
}
Hi Kaidez , thank you so much for your tutoriel, it s so easy to understand asnd so clear, would you please post a code to keep the animation turning automaticly
Thanks
Hi Sumo. Thanx for the kind words!
If you want it to go on continuously, I would suggest jQuery Cycle plugin. I am working on a JavaScript for() loop that does this, however. Watch this space for that!
But if you would like something immediately, check out JQ Cycle at http://jquery.malsup.com/cycle/
Hi Subha. Are you trying to apply the fade to table rows (<tr> tags)? If yes, that won’t work.
You can, however fade the content INSIDE the rows. In other words, apply the code to an element inside the row…like a div tag:
<div id=”content”>
What is SCORM
The need for SCORM
What is SCO
/<div>
Hi Kaidez,
Thanks for the great tutorial. I learnt so much from it.
I have combined my fadeIn/Out code into a function which I call when the document is ready. Is there a way to loop this function once the final fadeOut has completed? See below.
$(document).ready(function() {
startSlideShow();
});
function startSlideShow() {
$(‘#picOne’).fadeIn(1000).delay(3000).fadeOut(1000);
$(‘#picTwo’).delay(5000).fadeIn(1000).delay(3000).fadeOut(1000);
$(‘#picThree’).delay(10000).fadeIn(1000).delay(3000).fadeOut(1000);
}
I have been looking at using the setInterval feature but have had no luck with the research. I’m previously an Action Script 2 programmer nut have been massively put to shame with this new revolution! If you can help it would be greatly appreciated. Danny.
Hey Kaidez,
Thanks for the reply.
I fixed it by creating some more id’s (picOne, picTwo, picThree etc….)
Works a dream.
D
Can you please help me with this script, im new in jQuery.
i want to apply fade effect on #subbar id like applied on #profile_slideshow id with this code: animation: { type: “fade”, interval: 3500, speed: 1000 },
i tried to use it on #subbar id, but failed.
Can you help me for for this…..thanks
my js code as follow
$(document).ready(function()
{
// Empty the previous content
$(“#profile_slideshow”).html(”);
// attach the showcase
var showMap = true;
$(“#profile_slideshow”).showcase({
images: eval(profilePictures),
width: “1200″,
height: “600″,
border: “solid #fff 1px”,
animation: { type: “fade”, interval: 3500, speed: 1000 },
navigator: {
position: “bottom-right”,
showMiniature: true,
autoHide: true,
item: {
css: {
width: “57px”,
height: “29px”,
borderColor:”#ccc”,
margin: “2px”,
“-moz-border-radius”: “0px”,
“-webkit-border-radius”: “0px”
},
cssHover: {
backgroundColor: “#ddd”,
borderColor: “#000″ },
cssSelected: {
backgroundColor: “#fff”,
borderColor: “#fff” }
}
},
titleBar: {
enabled: true,
css: {
width: “0px”,
height: “0px”,
backgroundColor: “transparent”
}
}
});
$(“#subBar”).css({ position: “”});
// call the event to change the image caption
setInterval( function() {
// get image alt text which is the combination of caption and photographer name
var combined = $(“#subBar span”).text();
// seperate the caption and photographer name
var splited = combined.split(“$#$”);
if (splited.length > 1) {
// Form the div containing caption and photographer name in two lines
contDiv = ” + splited[0] + ” + splited[1] + ”;
// transfer the changing alt text from subBar to subBar2
$(“#subBar2 span”).html(contDiv);
} else {
// transfer the changing alt text from subBar to subBar2
$(“#subBar2 span”).text(splited[0]);
}
// Unbind all the click events
$(‘#slider a’).unbind(‘click’);
// Bind click event on images
$(‘#slider a’). click(function()
{
// If link is to be open in iframe then open in thickbox
if (-1 != this.href.search(‘iframe’)) {
//$.prettyPhoto.open(this.href,this.title);
$.fancybox({
‘title’ : this.title,
‘width’ : 850,
‘height’ : ’100%’,
‘padding’: 0,
‘margin’: 25,
‘overlayColor’: ‘#000′,
// ‘transitionIn’: ‘elastic’,
// ‘transitionOut’: ‘elastic’,
‘href’ : this.href,
‘type’ : ‘iframe’
});
return false;
}
});
}, 1000);
});
Pingback: The 13 E & E’s of the Fading Effect of jQuery! | RockingCode
how to use this fade effect for thumbnails, i have 5 thumbnails which i want to use for big images to change with fade in fadeout.
Thank you. I had problems integrating the fade in Joomla. This did it.
What I would like to do is have my logo come up first, then a shadow logo page, and then the logo with the page content and embed all of it in the index page of the website.
What I meant to ask if how to on my index page using javascrip have my logo image fade out, have a shadow image fade in and fade out to my original logo with all the content still on the index page, i.e. while staying on the same page.
Hi Claire. Thanks for stopping by!
If I understand you correctly, you want to have four images fade in and out of one another…and the first one (the logo) is already visible on the page since it’s fading out at the beginning.
If I’m correct about this and you want to do it with a delay AND you want things to fade in and out of one another, I would use jQuery instead of JavaScript as it’s easier to do the all the fading. The code would be messy but and look somewhat like the following:
//CSS
#logo {display:block; position:absolute;}
#picOne, #picTwo, #picTwo {display:none; position:absolute;}
//jQuery
$(document).ready(function() {
$('#logo').fadeOut(1500);
$('#picOne').fadeIn(1500).delay(3500).fadeOut(1500);
$('#picTwo').delay(6500).fadeIn(1500).delay(3500).fadeOut(1500);
$('#picThree').delay(13000).delay(5000).fadeIn(1500);
});
Note that the CSS just handles which page elements are visible on page load.
Hope this helps!
kg
Thank you Kaidez!!!
Your tutorial is so well explained. Thank you so much! Also, thanks for catching my typo!!!!
Amy
nice post. i have a small doubt. After second is appear the animation was stopped.
How can you give this as countineuosly playing effect?
Hi mahmood…thanks for stopping by!
Assuming that you’re using two images, the code would look like this:
//CSS
#logo {display:block; position:absolute;}
#picOne, #picTwo, {display:none; position:absolute;}
//jQuery
$(document).ready(function() {
$('#picOne').fadeIn(1500).delay(3500).fadeOut(1500);
$('#picTwo').delay(5000).fadeIn(1500).delay(3500).fadeOut(1500);
});
OOOPS!!! Typo…the code should look like this:
//CSS
#picOne, #picTwo, {display:none; position:absolute;}
//jQuery
$(document).ready(function() {
$(‘#picOne’).fadeIn(1500).delay(3500).fadeOut(1500);
$(‘#picTwo’).delay(5000).fadeIn(1500).delay(3500).fadeOut(1500);
});
Dear kaidez,
I love this effect! Thank you for sharing it.
I am quite the novice. In putting this together as a larger, slooow slideshow for my website, the transition works great but I noticed that all the images (I’m using 15!) line up below each other on the page and I can’t figure out why. I’m using Dreamweaver. I _thought_ I made the wrapping container the way it is supposed to be, but it is obviously not correct. Do I need to add something else? I’m adding the head and (parts of) the body below. Please advice what I did wrong, if you would be so kind. Many thanks!
——- parts of head:
_
#picOne, #picTwo,#picThree, #picTFour, picFive#, picSix, #picSeven, #picEight, #picNine, #picTen, #picEleven, #picTwelve, #picThirteen, #picFourteen, #picFifteen {
position:absolute;
display: none;
}
#pics {
width:1000px;
height:800px;
}
#pics {
background-color: #000;
background-position: center center;
height: 800px;
width: 1000px;
position: absolute;
}
$(document).ready(function() {
$(‘#picOne’).fadeIn(1500).delay(3500).fadeOut(1500);
$(‘#picTwo’).delay(10000).fadeIn(1500).fadeOut(1500);
$(‘#picThree’).delay(20000).fadeIn(1500).fadeOut(1500);
$(‘#picFour’).delay(30000).fadeIn(1500).fadeOut(1500);
$(‘#picFive’).delay(40000).fadeIn(1500).fadeOut(1500);
$(‘#picSix’).delay(50000).fadeIn(1500).fadeOut(1500);
$(‘#picSeven’).delay(60000).fadeIn(1500).fadeOut(1500);
$(‘#picEight’).delay(70000).fadeIn(1500).fadeOut(1500);
$(‘#picNine’).delay(80000).fadeIn(1500).fadeOut(1500);
$(‘#picTen’).delay(90000).fadeIn(1500).fadeOut(1500);
$(‘#picEleven’).delay(100000).fadeIn(1500).fadeOut(1500);
$(‘#picTwelve’).delay(110000).fadeIn(1500).fadeOut(1500);
$(‘#picThirteen’).delay(1200000).fadeIn(1500).fadeOut(1500);
$(‘#picFourteen’).delay(130000).fadeIn(1500).fadeOut(1500);
$(‘#picFifteen’).delay(1400000).fadeIn(1500);
});
__________
——- parts of body:
___________
Bizarrely enough, the code seems to have been cut short in my previous post, so I’m resending it just in case. Please delete this post in case you did receive a complete message in my previous post.., Thanks! Sorry about that!
_
#picOne, #picTwo,#picThree, #picTFour, picFive#, picSix, #picSeven, #picEight, #picNine, #picTen, #picEleven, #picTwelve, #picThirteen, #picFourteen, #picFifteen {
position:absolute;
display: none;
}
#pics {
width:1000px;
height:800px;
}
#pics {
background-color: #000;
background-position: center center;
height: 800px;
width: 1000px;
position: absolute;
}
$(document).ready(function() {
$(‘#picOne’).fadeIn(1500).delay(3500).fadeOut(1500);
$(‘#picTwo’).delay(10000).fadeIn(1500).fadeOut(1500);
$(‘#picThree’).delay(20000).fadeIn(1500).fadeOut(1500);
$(‘#picFour’).delay(30000).fadeIn(1500).fadeOut(1500);
$(‘#picFive’).delay(40000).fadeIn(1500).fadeOut(1500);
$(‘#picSix’).delay(50000).fadeIn(1500).fadeOut(1500);
$(‘#picSeven’).delay(60000).fadeIn(1500).fadeOut(1500);
$(‘#picEight’).delay(70000).fadeIn(1500).fadeOut(1500);
$(‘#picNine’).delay(80000).fadeIn(1500).fadeOut(1500);
$(‘#picTen’).delay(90000).fadeIn(1500).fadeOut(1500);
$(‘#picEleven’).delay(100000).fadeIn(1500).fadeOut(1500);
$(‘#picTwelve’).delay(110000).fadeIn(1500).fadeOut(1500);
$(‘#picThirteen’).delay(1200000).fadeIn(1500).fadeOut(1500);
$(‘#picFourteen’).delay(130000).fadeIn(1500).fadeOut(1500);
$(‘#picFifteen’).delay(1400000).fadeIn(1500);
});
__________
——- parts of body:
___________
It just did it again. – Sigh. -
Hi Chris. Thanks for stopping by…sorry for the late response.
All images after the first one should start things off with a delay that’s in some increment of 5000 milliseconds.
$(document).ready(function() {
$('#picOne').fadeIn(1500).delay(3500).fadeOut(1500);
$('#picTwo').delay(5000).fadeIn(1500);
});
You delays in your code are at 10,000 milliseconds:
Hi Chris. Thanks for stopping by…sorry for the late response.
All images after the first one should start things off with a delay that’s in some increment of 5000 milliseconds.
$(document).ready(function() {
$('#picOne').fadeIn(1500).delay(3500).fadeOut(1500);
$('#picTwo').delay(10000).fadeIn(1500);
});
HTH,
-kaidez
Excellent tutorial! I gleamed what I needed at a glance (although I did go back and read the whole article to make sure I didn’t miss anything.)
Thanks!
this shit don’t work.
Hi bobj. I’m sorry to hear that you’re having a problem. Can you share your code with us so we can solve the problen.
i’ve been trying to make a fade-in fade-out slide show using java and css, and somehow, it doesn’t work. i came across this and WOW, it was A LOT EASIER! not to mention WORKING! THANK YOU SO MUCH FOR THISSS!!!
awsome, I am beginner for jquery, found this simple and easy tutorial to follow help me alot, thank you very much.
Thx!
img { display: none } made my day!
Please post same repeating fade in fade out script, please..
Hi Sanu. Thanks for stopping by!
If you want to loop this effect, the code, a plugin like jQuery Cycle may be better.
Great info for the novice web page person.
When I create a page with the below code, it jumps to #picTwenty and stops.
What did I do wrong? Thanks for what you do.
================================
A Simple jQuery Fade In/Fade Out
#picOne, #picTwo, #picThree, #picFour, #picFive, #picSix, #picSeven, #picEight, #picNine, #picTen, #picEleven, #picTwelve, #picThirteen, #picFourteen, #picFifteen, #picSixteen, #picSeventeen, #picEighteen, #picNineteen, #picTwenty, #picTwentyOne {
position:absolute;
display: none;
}
#pics {
width:100px;
height:100px;
}
$(document).ready(function() {
$(‘#picOne’).fadeIn(1500).delay(3500).fadeOut(1500);
$(‘#picTwo’).delay(5000).fadeIn(1500);
$(‘#picThree’).delay(5000).fadeIn(1500);
$(‘#picFour’).delay(5000).fadeIn(1500);
$(‘#picFive’).delay(5000).fadeIn(1500);
$(‘#picSix’).delay(5000).fadeIn(1500);
$(‘#picSeven’).delay(5000).fadeIn(1500);
$(‘#picEight’).delay(5000).fadeIn(1500);
$(‘#picNine’).delay(5000).fadeIn(1500);
$(‘#picTen’).delay(5000).fadeIn(1500);
$(‘#picEleven’).delay(5000).fadeIn(1500);
$(‘#picTwelve’).delay(5000).fadeIn(1500);
$(‘#picThirteen’).delay(5000).fadeIn(1500);
$(‘#picFourteen’).delay(5000).fadeIn(1500);
$(‘#picFifteen’).delay(5000).fadeIn(1500);
$(‘#picSixteen’).delay(5000).fadeIn(1500);
$(‘#picSeventeen’).delay(5000).fadeIn(1500);
$(‘#picEighteen’).delay(5000).fadeIn(1500);
$(‘#picNineteen’).delay(5000).fadeIn(1500);
$(‘#picTwenty’).delay(5000).fadeIn(1500);
$(‘#picTwentyOne’).delay(5000).fadeIn(1500);
});
Hi Jerry. Thanks for stopping by!
For every image that you add after the second one, you have to add a delay of 5000 milliseconds so the all of the fades are synced up neatly. For every image that you ad after that point, you have to increase that beginning delay by an increment of 5000 milliseconds.
So if you want to do this and also fade image out as well, the code would look like this:
$(document).ready(function() {
$(‘#picOne’).fadeIn(1500).delay(3500).fadeOut(1500);
$(‘#picTwo’).delay(5000).fadeIn(1500).delay(3500).fadeOut(1500);
$(‘#picThree’).delay(10000).fadeIn(1500).delay(3500).fadeOut(1500);
$(‘#picFour’).delay(15000).fadeIn(1500).delay(3500).fadeOut(1500);
Hey Kaidez,
I am doing fadein fadeout effect with three image but its not continue work after last image its stopped can you let me know how to run continue effect with more than a 5images.
Hi Pratik. Thanks for stopping by!
I’m sorry to hear that you’re having issues…please share your code.
I had to comment and thank you for this great coding. I have searched for ages to find simple javascript, css and html combination to do just this. Worked first time and so easy to add href and mouse over.
Absolutely brilliant!
I am really happy I stumbled upon your blog, you have some great resources! The above tutorial was very straight forward and easy to follow.
Is there a way to create a button that would allow the user to restart the fading images from the beginning?
I look forward to seeing more tutorials on html5, css3, and jquery.
Hello all. I’ve now made this code dynamic, using a JavaScript for loop which generates the jQuery on the fly. There’s a demo, a code sample and three-part screencast tutorial on how I made it.
If interested, please check it out att: http://bit.ly/yjq3KQ.
Thanks much…happy coding!
-kaidez
26 Points
51 Posts
Fade In/Out between two divs
a few seconds ago|LINK
Hi,
I have got two slogans on my website inside the div and i want to fade them In/out continuesly on the home page. First it will show the div one and then after few seconds it should show the div two and then div one and two and so on.
How can this be done with jquery?
.
Hi u. Thanls for stopping by!
I usually recommend jQuery Cycle for this but I’ve gotten lot of requests to handcode this out. I will work on this…it will take me time, but I’ll WILL work on it…I PROMISE!
-kaidez
thanks
Thanks.
Here is the code i am working on at the moment and it works fine but it stops after showing 2nd div. I want to show both messages all the time.
– jsFiddle demo by kaidez
.toBeFaded {
display: none;
position:absolute;
font-size:70pt;
}
//<![CDATA[
$(window).load(function(){
$(function (){
var yourFade = 1,
yourDelay = 2,
fadeTime = yourFade * 1000,
delayTime = yourDelay * 1000,
totalTime = fadeTime + delayTime,
allElems,
elemNoFade,
i,
fadingElem;
for (i = 0, allElems = $('.toBeFaded').length, elemNoFade = allElems – 1; i
Here’s the first message…
We have second one here…
Hey u. Is there a need for the code to be wrapped in the
$(window).load(function(){call? If yes, there may be an issue with scope traversal. Would you be able to post all your code? either here or at JSFiddle?Here is the code:
– demo
//
function imageOneFade()
{
$(‘#slog1′).fadeIn(2000,
function()
{ setTimeout(“$(‘#slog1′).fadeOut(2500); imageTwoFade();”,6000); });
}
function imageTwoFade()
{
$(‘#slog2′).fadeIn(2000,
function(){ setTimeout(“$(‘#slog2′).fadeOut(2500); imageOneFade();”,6000); });
}
$(document).ready(function()
{imageOneFade(); });
A trusted and proven provider of global Database.
Life & text here built upon local Knowlege
Thank you so much for sharing your code. I am a novice with js and am hoping to learn more….but this was what I need. THANK YOU SOOOOO MUCH!!!!!!
Hi Inga. Thank you for your VERY kind words. You’re welcome…glad it helped!!!!
Can I ask, how do you loop it?
Hi there,
Thanks for your tutorial, it really helped me out.
But I have another problem…
I use 3 pictures and the first one appears longer than the other 2 after the first one and I don’t know how to make them appear longer.
And I also want to repeat it but after the last picture it stops.
Please help me out
I’m just a beginner so i don’t know alot about scripting and such things…
Thanks anyway!
I can’t believe how readable this is, and how quickly it made sense to me. Been doing light coding for years but finally decided to LEARN html5 / css3 and whatnot. Rebuilding my dad’s website, and really want to make it all-device friendly, so no flash slideshows. This tutorial and info was freaking awesome. Thank you. (My own site is the next project!)
Thanks. Was spot on for what I needed!
Hi Matt…excellent so glad it helped!
Great tutorial, not just the fader stuff but a nice way to get into jquery. Good luck and a thousand thanks for taking the time to put this together and make it so easy for lots of others to get started.