Fadein和图像的淡化

Question

我找到了一个很好的脚本，可以在我的项目中使用但是无法弄清楚如何使图像fadein和使用此脚本淡化

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