jQuery fadeToggle element

Question

I have a div that contains two <p> elements and I am trying to toggle them with a click on another div, using a fade effect (has an initial CSS display:none; ). But when I click the trigger div, despite the effect works, during the transition, both elements are visible, so one jumps under the other one, and only when the effect finishes, the other element is removed and the new visible one goes to the correct position. Basically I want the fade in part to start only when the fading out element is no longer "using space", so it fades in in the same place the other was. How can I solve that?

Here's my code:

JS:

$("span#contagem-fotos").click(function() {
    $("div.info-foto p").fadeToggle();
});

CSS:

ul#listagem-fotos li div.info-foto {
    padding:7px;
    height:14px;
    background-color:#300;
    position:relative;
}

ul#listagem-fotos li div.info-foto p.texto-ficheiro {
    font-size:0.80em;
    text-align:left;
    display:none;
}

ul#listagem-fotos li div.info-foto p.texto-numero {
    font-size:1em;
    text-align:center;
}

HTML:

<div class="info-foto">
    <p class="texto-numero"><?php echo sprintf("%04d", $db->SeekPosition()); ?></p>
    <p class="texto-ficheiro"><?php echo $row->filename; ?></p>
    <div data-imageid="<?php echo $row->image_id; ?>" class="fav-icon <?php echo $fav_class; ?>" title="Adicionar/remover favorito"></div>
</div>

Answer 1

Check this out...much better without positioning

Fiddle

Fiddle Using Your Markup

 $("button").click(function() {
    $("p").not('.hide').fadeToggle(function(){        
        $(".hide").fadeToggle(function(){
                $("p").addClass('hide');
                $(this).removeClass('hide');
        });
    });

});

Answer 2

You can try and use delay(milliseconds) like below:

var show_hide = function () {
    $("span#contagem-fotos").fadeToggle(callblack);
}

var callblack = function () {
    $("div.info-foto p").fadeToggle()
        .delay(500).queue(show_hide);
}