1

私は自分のプロジェクトでこのライブラリを使用しています：jQuery Tools Tabs、そして私が読んだことから、デフォルトのエフェクトを使用する代わりにカスタムエフェクトを作成できます。

私はこのような効果を持つことに決めました:デモ. そして、似たようなものを見つけましたが、実装に問題があります。

$.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

私はあなたの例に似たコンテンツ スライダーを作成しました (ただし、FadeIn/Out 機能はありません) が、コードを変更することでその効果を得ることができます。
ここでフィドル
私の完全なコード：

$(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 に答える