Question

I”m using this library in my project : jQuery Tools Tabs, and from what I’ve read I can make my custom effect instead of having the default one.

I decided to have an effect like this one : Demo . And I found something that could be similar, but I’m having trouble implementing it.

$.tools.tabs.addEffect("subFade", function(tabIndex, done) {
    var conf = this.getConf(),
        speed = conf.fadeOutSpeed,
        panes = this.getPanes();
    var $tab = this.getCurrentTab();

    if($tab.hasClass("current")){//Going AWAY from the tab, do hide animation (before the tab is hidden)
        $(".tabs-tab").animate({"left" : "0px"}, 300, function(){//I was sliding it behind the tabs when not in use, replace with your own animation
            panes.hide();
            panes.eq(tabIndex).fadeIn(200, done);
            console.log("Done done");
            //This is then end of the chain - my animation, hide all then fade in new tab.
        });
    } else {//going away from any other tab
        panes.hide();
        panes.eq(tabIndex).fadeIn(200, done);
    }

    $tab = this.getTabs().eq(tabIndex);

    if($tab.hasClass("current")){//Going to my special tab.
        $(".tabs-tab").animate({"left" : "-160px"}, 300);//Sliding it out
    }
    // the supplied callback must be called after the effect has finished its job
    done.call();
});

The above is what I have been trying but without success. So I was wondering if someone knows what I’m doing wrong and how can I make that custom effect behave like the demo ?

Answer 1

I have made a content slider similar to your example (however it does Not have FadeIn/Out functionality), but maybe with some modification of my code you can make that effect.
Fiddle here

My full code:

$(document).ready(function() {

$('.slides div:not(:first)').hide();
$('.slides div:first').addClass('active');
//Put .active width in var 
var activeWidth = $(".active").outerWidth();

$('.control p:first').addClass('current');
$('.control p').click(function() {  
/*store P index inside var*/    
var Pindex = $(this).index(); 
/* Store the slides in var*/
var slidePosition=$('.wrapper .slides div');
/* check if ACTIVE slide has GREATER index than clicked P TAG (CONTROLS)*/
if($(".wrapper .slides div.active").index() > $('.wrapper .slides div').eq(Pindex).index()) {
/*Show the slide equal to clicked P-TAG(CONTROLS)*/
slidePosition.eq(Pindex).show();
/*Add class "current" to the clicked control*/
 $(this).addClass('current').prevAll('.current').removeClass('current');
 $(this).nextAll('.current').removeClass('current');    
 $(".active").removeClass("active");
 $(".slides").css({"margin-left":-activeWidth});
 /*Start animation...*/
 $(".slides").animate({marginLeft:activeWidth-activeWidth},1000,function() {     
 slidePosition.eq(Pindex).addClass("active");
 $(".slides").css({"margin-left":"0px"});
 $(".active").prevAll().hide();
 $(".active").nextAll().hide();
 });
}

if($('.slides').is(':animated')) {   
   return false;
}   

if($(this).is($(".current"))) {   
   return false;
}


if($(".wrapper .slides div.active").index() < $('.wrapper .slides div').eq(Pindex).index()) {
 slidePosition.eq(Pindex).show();
 $(this).addClass('current').prevAll('.current').removeClass('current');
 $(this).nextAll('.current').removeClass('current');    
 $(".active").removeClass("active");

    $(".slides").animate({marginLeft:-activeWidth},1000,function() {     
     slidePosition.eq(Pindex).addClass("active");
     $(".slides").css({"margin-left":"0px"});
     $(".active").prevAll().hide();
     $(".active").nextAll().hide();
    });
}

    });
$(".left").click(function() {      
 if($('.slides').is(':animated')) {   
   return false;
 }      
if($(".active").prev().length===0) {     
 //alert("no prev");
 $(".active").nextAll().clone().insertBefore(".active");
 $(".active").removeClass("active").prev().addClass("active");
 $(".active").show();
 $(".slides").css({"margin-left":-activeWidth});
    $(".slides").animate({marginLeft:activeWidth-activeWidth},1000,function() {           
     $(".active").next().insertBefore($(".slides div:first")).hide();
     var activeIndex = $(".active").index();
     $(".active").nextAll().remove();
     $(".current").removeClass("current");          
     //alert(activeIndex)
     $(".control p").eq(activeIndex).addClass("current");
    });         
}
else{

     $(".active").removeClass("active").prev().addClass("active");
     $(".active").show();
     $(".slides").css({"margin-left":-activeWidth});
        $(".slides").animate({marginLeft:activeWidth-activeWidth},1000,function() {  
         var activeIndex = $(".active").index();                
         $(".active").prevAll().hide();
         $(".active").nextAll().hide();
         $(".current").removeClass("current");           
         $(".control p").eq(activeIndex).addClass("current");
        }); 
    }       
}); 

$(".right").click(function() {    
  if($('.slides').is(':animated')) {   
   return false;
  }   
    if($(".active").next().length===0) {
      //alert("no next")       
     $(".slides div:first").nextAll(':not(.active)').clone().insertAfter(".active");
     $(".slides div:first").insertAfter(".active");
     $(".active").removeClass("active").next().addClass("active");
     $(".active").show();
     $(".slides").animate({marginLeft:-activeWidth},1000,function() {        
        $(".active").prev().hide().insertAfter(".slides div:last");
        $(".slides").css({"margin-left":"0px"});
        $(".active").prevAll().remove();
         $(".current").removeClass("current");
         var activeIndex = $(".active").index();    
         $(".control p").eq(activeIndex).addClass("current");
        });        
    }
    else{
     $(".active").removeClass("active").next().addClass("active");
      $(".active").show();        
        $(".slides").animate({marginLeft:-activeWidth},1000,function() {         
         $(".slides").css({"margin-left":"0px"});
         $(".active").prevAll().hide();
         $(".active").nextAll().hide();
         $(".current").removeClass("current");
         var activeIndex = $(".active").index();    
         $(".control p").eq(activeIndex).addClass("current");

        }); 

    }
});

    });