jQuery fadeIn elements one at a time with onClick

Question

I'm trying to create a really basic slideshow where the user can click a back or next arrow to see the previous or next element. I have found various questions similar to this but they are automated transitions; I'm looking for the element to switch one at a time onclick. If next is clicked it should go forward, if back is clicked, it should go back. If someone clicks back from the first time, it should show the last; if they click Next when they're on the last one, it will go back to the first.

The code I have currently cycles through multiple elements. I'm new at this so I'm having trouble figuring out how to get it to go only one at a time. This has to work with jQuery 1.3.2, as the site I uses has that library loaded and we can't update it.

It doesn't have to be LI, could be div too if that's better for some reason. Any suggestions on how to achieve are appreciated.

here is a link to my fiddle, but basic HTML would be:

        <div id="arrow-next"></div>
        <div id="arrow-back"></div>

        <ul class="services">
            <li style="display: block;">slide 1</li>
            <li>slide 2</li>
            <li>slide 3</li>
            <li>slide 4</li>
            <li>slide 5</li>
            <li>slide 6</li>
        </ul>

css:

        ul.services li{
        height: 500px;
        width: 980px;
        border: 1px solid #ccc;
        text-align: center;
        list-style-type: none;
        position: absolute;
        top: 0;
        left: 0;
        display: none;
        background-color: #fff;
        }

        ul.services {
        display: inline-block;
        position: relative;
        }

jquery:

        $(document).ready(function() {
            $("#arrow-next").click(function() {
               $('ul.services li').fadeOut(function(){
                    $(this).next().fadeIn('slow');
                });
            });
            $("#arrow-back").click(function() {
               $('ul.services li').fadeOut(function(){
                    $(this).prev().fadeIn('slow');
                });
            });
        });

Thanks in advance for any help you can offer. I found this post and tried to update like so, but it does not change what happens with the code I already had.

            $(document).ready(function() {
                $("#arrow-next").click(function() {
                   $('ul.services li').fadeOut(function(){
                        $(this).next().fadeIn('slow', function(){
                        $(this).prev().fadeOut('slow');
                    });
                    });
                });
                $("#arrow-back").click(function() {
                   $('ul.services li').fadeOut(function(){
                        $(this).prev().fadeIn('slow');
                    });
                });
            });

You have different code here and in the fiddle. – Lee Meador Sep 16 '13 at 20:28 — Lee Meador, Sep 16 '13 at 20:28

PSL · Accepted Answer · 2013-09-16T20:47:49.160

4

something like this?

$(document).ready(function () {
    $("#arrow-next").click(function () {
        $('ul.services li:visible').fadeOut(function () { //select only the visible element
            var $next = $(this).next(); //get the next element
            var $target = $next.length ? $next : $('ul.services li:first'); //if there is no next then switch the pointer to point to the first one.
            $target.stop(true,true).fadeIn('slow'); //now fadeIn the target element.
        });
    });
    $("#arrow-back").click(function () {
        $('ul.services li:visible').fadeOut(function () {
            var $prev = $(this).prev(); //get the prev element
            var $target = $prev.length ? $prev : $('ul.services li:last');//if there is no next then switch the pointer to point to the last one.
            $target.stop(true,true).fadeIn('slow');//now fadeIn the target element.
        });
    });
});

Fiddle

edited Sep 16 '13 at 20:47

answered Sep 16 '13 at 20:29

PSL

123,204
21
253
243

This works perfectly, thank you. So the .length checks to see if it is there or not? Any clarification on why this work would be much appreciated, love to learn. – surfbird0713 Sep 16 '13 at 20:38
@surfbird0713 Sure... `.length` returns 0 or more so if it is 0 it is falsy else it is truthy so based on the condition it selects either the selected target or the first or the last element. – PSL Sep 16 '13 at 20:40
@surfbird0713 also if you look at my comment it should be explaining you why yours did not work because it selects only the visible element in my example... – PSL Sep 16 '13 at 20:43

Lee Meador · Answer 2 · 2013-09-16T20:42:31.487

The problem is that this part:

$('ul.services li')

matches all the <li> elements so they all fade out and then the next element (for each one) fades in.

If you do this:

$("#arrow-next").click(function() {
    $('ul.services li:visible').fadeOut(function(){
        $(this).next().fadeIn('slow');
    });
});
$("#arrow-back").click(function() {
    $('ul.services li:visible').fadeOut(function(){
        $(this).prev().fadeIn('slow');
    });
});

you will be able to move up and down but "up" on the last one won't fadein the first one. (The key difference is the :visible added to the selector.)

Finally, add one more bit to make it roll around at the end by checking whether one faded in by doing the normal stuff and then, if not, fade the first (or last) one in.

$("#arrow-next").click(function () {
    $('ul.services li:visible').fadeOut(function () {
        $(this).next().fadeIn('slow');
        if ($('ul.services li:visible').length == 0) {
            $('ul.services li:first').fadeIn('slow');
        }
    });
});
$("#arrow-back").click(function () {
    $('ul.services li:visible').fadeOut(function () {
        $(this).prev().fadeIn('slow');
        if ($('ul.services li:visible').length == 0) {
            $('ul.services li:last').fadeIn('slow');
        }
    });
});

FIDDLE

Do you have a suggestion for how to update it to get it to work? If I assign a unique ID to each slide, wouldn't I have to write a lot of logic to display the correct slide, in order, in case the customer does a mix of Next/Back cliks? — surfbird0713, Sep 16 '13 at 20:29

score 0 · Answer 3 · answered Sep 16 '13 at 21:36

Here how I would do it:

HTML:

<div><span class="leftArrow">< </span><span class="rightArrow"> ></span></div>
  <div class="slideContainer">
  <div class="slide1 slide">slide 1</div>
  <div class="slide2 slide">slide 2</div>
  <div class="slide3 slide">slide 3</div>
  <div class="slide4 slide">slide 4</div>
</div>

JavaScript:

$('.slide').hide();
$('.slide1').show().addClass('active');
var eq=0;
$('.leftArrow').on('click',function(){
  $('.active').hide("slide", { direction: "right" }, 500);
  if(eq==0){
      $('.slide').removeClass('active');
      eq=3;
      $('.slide:eq('+eq+')').addClass('active');         
  }
  else{
      eq=eq-1;       
      $('.slide').removeClass('active');
      $('.slide:eq('+eq+')').addClass('active');      
  }    
  $('.active').show('slide',{direction:"left"},500);
});



$('.rightArrow').on('click',function(){
$('.active').hide("slide", { direction: "left" }, 500);
  if(eq==3){
      $('.slide').removeClass('active');
      eq=0;
      $('.slide:eq('+eq+')').addClass('active');         
  }
  else{
      eq=eq+1;        
      $('.slide').removeClass('active');
      $('.slide:eq('+eq+')').addClass('active');      
  }    
  $('.active').show('slide',{direction:"right"},500);
});

You can see the working example here: http://jsfiddle.net/PHrct/

jQuery fadeIn elements one at a time with onClick

3 Answers3