Fade in fade out related div animation

Question

So I have this code

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

But I'm not quite sure how to animate it. What I want to do is when you click a link, the div fades in (it works), but when you click the related links, I don't want the box to fade out and in again (except for the texts inside it though).

Here's the fiddle

Thanks! x

Answer 1

To get this to fade properly both ways I think you need to play with the 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();
});
});

Here is the fiddle