淡入和圖像

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

    }); 
});