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