Simple jQuery fade in fade out image

Question

Is there any scripts I can use to create a slideshow where a picture fades out and another replaces it. I am using the list below to list the images. The scripts I see currently slides the images left and right but none fades in an out.

<ul class="slideshow">
<li><img src="images/image1.gif" /></li>
<li><img src="images/image2.gif" /></li>
<li><img src="images/image3.gif" /></li>
<li><img src="images/image4.gif" /></li>
<li><img src="images/image5.gif" /></li>
<li><img src="images/image6.gif" /></li>
</ul>

Fade in and out on what action? On page load? On hover??? etc. Need more details. — Michael, Feb 06 '13 at 16:11
creating a slideshow so there is one image which fades out and another replaces it in the same box. I have tried various scripts and they all work but they are too complex if you know what I mean...I was hoping I could get a simpler script to do this — Jay Smoke, Feb 06 '13 at 16:16
You may try this example : http://webdevlopementhelp.blogspot.in/2009/09/jquery-fade-in-fade-out-effect.html — kiran, Nov 15 '13 at 12:39

António Almeida · Accepted Answer · 2013-02-06T17:39:18.653

10

This was the simplest I could get, its a circular gallery, it starts over when it reaches the end.

Here is a fiddle: http://jsfiddle.net/KA4Zq/

var count = 1;
setInterval(function() {
    count = ($(".slideshow :nth-child("+count+")").fadeOut().next().length == 0) ? 1 : count+1;
    $(".slideshow :nth-child("+count+")").fadeIn();
}, 2000);

The only thing you should change is the 2000 value (2sec). If you add more images to the gallery you don't need to set any other variable, the script do everything by it self...

And to be event simpler, I changed your html too, there's no need to have a ul list, just a div with images inside:

<div class="slideshow">
    <img src="" />
    <img src="" />
    ...
</div>

edited Feb 06 '13 at 17:39

answered Feb 06 '13 at 17:33

António Almeida

9,620
8
59
66

by the way to control fade in out timer, add a parameter with the milisecs you want to the function. ex: `fadeIn(1000);` – António Almeida Feb 06 '13 at 17:40
Thanx Toni, but isn't nth-child not yet supported by certain IE browsers? – Jay Smoke Feb 06 '13 at 17:40
@JaySmoke I tested this example in IE7 8 and 9 and its working... Probably the `:nth-child` is not supported in IE when used in CSS selectors, however in jQuery it works ... – António Almeida Feb 06 '13 at 17:51
@JaySmoke, I've used `$(".slideshow :nth-child(0)")` but you can also for example `$(".slideshow").children().eq(0)`, the result is the same ... – António Almeida Feb 06 '13 at 17:55
@ToniAlmeida can you help me about my this question, please? http://stackoverflow.com/q/19590956/1534785 – Jeyhun Rahimov Oct 25 '13 at 13:17
It's answered @JhoonBey :) – António Almeida Oct 25 '13 at 16:31

Anton · Answer 2 · 2013-02-06T16:30:12.780

5

Select all images inside ul li like this $('ul li img') then use .fadeIn() to make the images fade in.

$('ul li img').fadeIn('slow');

To make a slideshow of it you can use interval and :eq()

      var cnt = 0; 
setInterval(function(){
        cnt ==7 ? cnt=0:cnt++
        $('ul li img').fadeOut('');
        $('ul li img:eq('+cnt+')').fadeIn(1000)
    },1000);

edited Feb 06 '13 at 16:30

answered Feb 06 '13 at 16:10

Anton

32,245
5
44
54

hello @Anton, scripts works but I have two concerns, 1. when the loop reaches the last image, there's a gap before the first image shows again. Can it be seamless? 2. How can you control the speed? Thanx a lot. – Jay Smoke Feb 06 '13 at 17:30

score 2 · Answer 3 · answered Feb 06 '13 at 16:12

2

$("ul > img").fadeOut().fadeIn()

answered Feb 06 '13 at 16:12

Jing

660
9
23

Simple jQuery fade in fade out image

3 Answers3