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

귀하의 예와 비슷한 콘텐츠 슬라이더를 만들었지 만 (은 아니요,은 FadeIn/Out 기능이 있음), 내 코드를 약간 수정하면 그 효과를 낼 수 있습니다.
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"); 

     }); 

    } 
}); 

    });