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

我製作了一個與您的示例相似的內容滑塊（但它的確有不是具有淡入/淡出功能），但可能通過對代碼進行某些修改即可實現該效果。
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"); 

     }); 

    } 
}); 

    });