javascript - jQuery fadeToggle 元素

Question

我有一个包含两个 <p> 的 div元素，我试图通过单击另一个 div 来切换它们，使用淡入淡出效果(具有初始 CSS display:none; )。但是，当我单击触发 div 时，尽管效果有效，但在过渡期间，两个元素都是可见的，因此一个元素跳到另一个元素下方，只有当效果完成时，另一个元素才会被移除，新的可见元素会转到正确的位置。基本上我希望部分淡入淡出仅在淡出元素不再“使用空间”时才开始，因此它会在另一个元素所在的同一位置淡入。我该如何解决？

这是我的代码:

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

检查一下...没有定位会好很多

Fiddle

Fiddle Using Your Markup

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

});