淡入淡出相关的div动画

Question

所以我有这样的代码

$(function() { 
$(".one, .two, .three").click(function (event) { 
    event.preventDefault(); 
    $("#" + $(this).attr("class")).fadeIn().siblings('.popup').hide(); 
    return false; 
}); 
$(".close").click(function (event) { 
    event.preventDefault(); 
    $(".popup").fadeOut(); 
}); 
}); 

但我不太知道如何制作动画。我想要做的是当你点击一个链接时，div淡入（它有效），但是当你点击相关链接时，我不希望盒子淡出并再次（除了它里面的文本）。

这里的fiddle

谢谢！ X

Answer 1

为了得到这个褪色正确两种方式我认为你需要用z-index的发挥：

$(function() { 

$(".one, .two, .three").click(function (event) { 
    event.preventDefault(); 
    $("#" + $(this).attr("class")).css('z-index', 1).fadeIn(function(){ 
     $(this).css('z-index', 0).siblings('.popup').hide();   
    }); 
    return false; 
}); 


$(".close").click(function (event) { 
    event.preventDefault(); 
    $(".popup").fadeOut(); 
}); 
}); 

这里是fiddle

Answer 2

希望这对你的作品

$（函数（）{

$(".one, .two, .three").click(function (event) { 
    event.preventDefault(); 
    $("#" + $(this).attr("class")).fadeIn(function(){ 
     $(this).siblings('.popup').hide();   
    }); 
    return false; 
}); 


$(".close").click(function (event) { 
    event.preventDefault(); 
    $(".popup").fadeOut(); 
}); 

}）;

这里是更新fiddle