我有一个包含两个 <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>
最佳答案
检查一下...没有定位会好很多
$("button").click(function() {
$("p").not('.hide').fadeToggle(function(){
$(".hide").fadeToggle(function(){
$("p").addClass('hide');
$(this).removeClass('hide');
});
});
});
关于javascript - jQuery fadeToggle 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21692592/