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');
        });
    });

});

Answer 2

您可以尝试使用延迟（毫秒），如下所示：

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

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