淡入和图像

Question

的淡出我找到了一个好剧本，将我的项目 工作，但无法弄清楚如何使图像淡入淡出，并用这个脚本

$(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()和​​动画

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

    }); 
});