javascript - jQuery 工具选项卡自定义动画

Question

我在我的项目中使用这个库:jQuery Tools Tabs ，根据我所读到的内容，我可以制作自定义效果，而不是使用默认效果。

我决定做出这样的效果:Demo 。我发现了一些可能类似的东西，但我在实现它时遇到了困难。

$.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();
});

以上是我一直在尝试但没有成功的方法。所以我想知道是否有人知道我做错了什么以及如何使自定义效果像演示一样？

Answer 1

我制作了一个与您的示例类似的内容 slider (但是它没有具有淡入/淡出功能)，但也许通过对我的代码进行一些修改，您可以实现这种效果。
Fiddle here
我的完整代码:

$(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");

        }); 

    }
});

    });