Question

我发现了一个适用于我的项目的好脚本但无法弄清楚如何使用此脚本制作图像fadeIn和fadeOut

$(document).ready(function() {
    var activeId = $(".active").each(function(){
        $("#content" + $(this).attr("id").replace("tab","")).show();
    });
   $(".tabs a").click(function() {
      var $tabs =$(this).closest(".tabs"); 
      $("#content" +$tabs.attr("data-lastContent")).hide();
      $(this).closest(".tabs").find(".active").removeClass("active");
      $(this).addClass("active")
      var id = $(this).closest("li").attr("id").replace("tab","");
       $tabs.attr("data-lastContent", id);
      $("#content" + id).show();

   });

});

http://jsfiddle.net/hKMFb/446/

Answer 1

你需要在hide（）和show（）方法中保持你的淡入和淡出速度。如下面的链接示例中所述，它可能适合您： http://jsfiddle.net/hKMFb/450/

$(document).ready(function() {
    var activeId = $(".active").each(function(){
        $("#content" + $(this).attr("id").replace("tab","")).show(1000);
    });
   $(".tabs a").click(function() {
      var $tabs =$(this).closest(".tabs"); 
      $("#content" +$tabs.attr("data-lastContent")).hide(1000);
      $(this).closest(".tabs").find(".active").removeClass("active");
      $(this).addClass("active");
      var id = $(this).closest("li").attr("id").replace("tab","");
       $tabs.attr("data-lastContent", id);
      $("#content" + id).show(1000);

   });

});

您还可以将fadeIn()和fadeOut()用于动画

$(document).ready(function() {
    var activeId = $(".active").each(function(){
        $("#content" + $(this).attr("id").replace("tab","")).fadeIn(1000);
    });
   $(".tabs a").click(function() {
      var $tabs =$(this).closest(".tabs"); 
      $("#content" +$tabs.attr("data-lastContent")).fadeOut(1000).hide();
      $(this).closest(".tabs").find(".active").removeClass("active");
      $(this).addClass("active");
      var id = $(this).closest("li").attr("id").replace("tab","");
       $tabs.attr("data-lastContent", id);
      $("#content" + id).fadeIn(1000);

   });
});

fadeIn和fadeOut的图像

1 个答案: