1

我在我的项目中使用这个库：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();
});

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

4

1 回答 1

1

我制作了一个与您的示例类似的内容滑块（但是它没有淡入/淡出功能），但也许通过对我的代码进行一些修改，您可以产生这种效果。
在这里摆弄
我的完整代码：

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

        }); 

    }
});

    });
于 2012-09-14T09:09:19.890 回答