fadeIn/fadeOut controls with jQuery

I have this example http://jsbin.com/ipasu3/4/ When you click on a div code it hides and shows the following finding. How can I combine two simple con开发者_StackOverflow中文版trols (next and prev) and make the same effect?

Thanks!

Something like this?

$(function() {
    $('.box:not(:first)').hide();

    $currentBox = $(".box:first");

    $("#next").click(function() {
        $currentBox.fadeOut(function() {
            $currentBox = $currentBox.next();
            $currentBox.fadeIn('300').addClass('active');
        });
    });

    $("#prev").click(function() {
        $currentBox.fadeOut(function() {
            $currentBox = $currentBox.prev();
            $currentBox.fadeIn('300').addClass('active');
        });
    });
});

Example: http://jsfiddle.net/jonathon/jhscX/

This applies the click handler to the prev/next divs. $currentBox holds the element that is currently being displayed and everything is done using this (so you just get the next() and prev() elements by using $currentBox.

This can be improved further - for example, you can check if $currentBox.next() is empty and hide the next div, etc. I've also put a function into the fadeOut call. This causes the fadeIn to be executed only when the div has finished fading out.

Just as a note about your original code. You don't have to do:

  $('.box').each(function(){
    $(this).click(function(){
      /* click handler code */
    });
  });  

When you set the handler for an element, it is applied to everything the selector would be selecting. In this instance, the following is the same:

  $('.box').click(function(){
      /* click handler code */
      /* 'this' refers to the clicked element */
  });  

this should be useful :)

HTML:

<div class="gallery">
    <a href="javascript:;" id="prev">Prev</a>
    <a href="javascript:;" id="next">Next</a>
    <div class="gallery-wrapper">
        <img src="image1.jpg" alt="" class="first"/>
        <img src="image2.jpg" alt=""/>
        <img src="image3.jpg" alt=""/>
        <img src="image4.jpg" alt=""/>
        <img src="image5.jpg" alt=""/>
    </div>
</div>

CSS:

a{outline:none;}
.gallery{width:510px;height:320px;position:relative;margin:0 auto;}
.gallery-wrapper{width:460px;height:300px;position:relative;border:10px solid #000;z-index:5;margin:0 auto;}
.gallery-wrapper img{width:460px;height:300px;position:absolute;left:0;top:0;display:none;}
.gallery-wrapper .first{display:block;}
#prev,#next{position:absolute;height:32px;width:32px;background:#ccc;text-indent:-2000px;display:block;z-index:10;top:139px;display:none;}
#prev{left:0;background:url(hp_slide_left_button.gif);}
#next{right:0;background:url(hp_slide_right_button.gif);}

jQuery (stick in script tag in head):

function MyGallery(){
    $(".gallery #prev,.gallery #next").fadeIn();
    function fadeInThis(show){
        $(".gallery-wrapper img:visible").fadeOut();
        $(".gallery-wrapper img:eq("+show+")").fadeIn();
    }

    //start with the img with class .first
    var current=$('.first').index('.gallery-wrapper img');
    var count=$(".gallery-wrapper img").size()-1;
    $(".gallery #prev").click(function(){
        current=(current==0)?count:current-1;
        fadeInThis(current);
        return false;
    });
    $(".gallery #next").click(function(){
        current=(current==count)?0:current+1;
        fadeInThis(current);
        return false;
    });
}

$(function(){
    MyGallery();
});

I hope that will help you :)

Cheers

G.

here's my try:

$(function() {
  var boxCount = $('.box').length;
  $('.box:not(:first)').hide();
  $('.box').each( function(){
    $(this).click( function(){
      $(this).fadeOut();
      $(this).next().fadeIn('300').addClass('active');
    });
  });
  var $nextBtn = $('#next').click(function() {

    var $curr = $('.box.active');
    $curr.fadeOut(function() {
      $(this).removeClass('active');
      var $next = $curr.next();
    if($next.length) {
      $next.fadeIn('300').addClass('active');
      $prevBtn.attr('disabled','');
      if($next.index() == boxCount - 1) $nextBtn.attr('disabled','disabled');
    } else
      $nextBtn.attr('disabled','disabled');
    })
  });
  var $prevBtn = $('#prev').click(function() {
    var $curr = $('.box.active');
    $curr.fadeOut(function() {
      $(this).removeClass('active');
      var $prev = $curr.prev();
    if($prev.length) {
      $prev.fadeIn('300').addClass('active');
      $nextBtn.attr('disabled','');
      if($prev.index() == 0) $prevBtn.attr('disabled','disabled');
    } else
      $prevBtn.attr('disabled','disabled');
    })
  });
  $prevBtn.attr('disabled','disabled');
});

Example link.