.effect('slide'... not showing next object

Question

I was browsing around stackoverflow for slider and found this one http://jsfiddle.net/skram/tHZLY/2/ (Somehow I can't find the topic...) code :

var $pages = $('.page');
$('#nxt').click(
  function() {
    var $cur = $('.active');
    var $next = $cur.next();

    if ($next.length == 0) return;

    $cur.removeClass('active');
    $next.addClass('active');

      $('.page').not('.active').effect('slide',{direction:'right',mode:'hide'});
      $('.active').effect('slide',{direction:'right',mode:'show'});
});

$('#prev').click(
  function() {
    var $cur = $('.active');
    var $prev = $cur.prev('.page');

    if ($prev.length == 0) return;

    $cur.removeClass('active');
    $prev.addClass('active');

    $('.page').not('.active').animate({"width": 0}, "slow");
    $('.active').animate({"width": 200}, "slow");
});

When I change .animate with .effect , next div is not showing.

JSFIDDLE with the change: http://jsfiddle.net/tHZLY/12/

Answer 1

The problem is that you're using 2 different methods to show/hide divs.

You should use either slide or width.

Width of not .active divs is initially set to 0px in CSS, so that they can be animated later on, using .animate({"width": 200}) . But it does not work with .effect('slide', ...) as it deos not actually affect the width property.

.animate({"width": 0}) does not make the element invisible, while you're applying .hide() on:

.effect('slide',{direction:'right',mode:'hide'});

Check this experiment .

---

To get this to work with .effect('slide', ...), you should remove width: 0px; from CSS of the divs, place all .page divs at one position (for demo purposes used simple position: absolute;) and do not mix 2 different show/hide methods on prev/next:

// hide not active divs:
$('.page:not(.active)').hide();
$('#nxt').click(function(){
    var $cur = $('.page.active');
    var $next = $cur.next('.page');

    if ($next.length == 0) return;

    $cur.removeClass('active').effect('slide',{direction:'left',mode:'hide'});
    $next.addClass('active').effect('slide',{direction:'right',mode:'show'});
});

$('#prev').click(function() {
    var $cur = $('.page.active');
    var $prev = $cur.prev('.page');

    if ($prev.length == 0) return;

    // do not mix up .aniamte(width) with .effect(slide)!
    $cur.removeClass('active').effect('slide',{direction:'right',mode:'hide'});
    $prev.addClass('active').effect('slide',{direction:'left',mode:'show'});
});

DEMO