.effect('slide'… not showing next object

.effect('slide'… not showing next object

I was browsing around for slider and found this one  http://jsfiddle.net/skram/tHZLY/2/ (Somehow I can't find the topic...) but I want to replace .animate with .effect here I wrote another jsfiddle with effect : http://jsfiddle.net/tHZLY/12/  but somehow the next div that is suppose to show is not showing.   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"); });