Question

我正在尝试先对div的内容进行.fadeOut()，然后我想{div}关闭.slideToggle()。我尝试过几件事：

$('#followUp').contents().fadeOut(650);
$('#followUp').delay(650).slideToggle();

$('#followUp').contents().fadeOut(function(){
    $('#followUp').delay(650).slideToggle();
})

上述两种方法均无效。我怎么能让这个工作好吗？谢谢！

Answer 1

如果“followUp”div中的标记由元素而不仅仅是文本节点组成，那么你的第一个例子大多有效，但在Firefox上失败，因为jQuery试图在任何文本上调用getComputedStyle节点。而不是contents()，您希望使用children()或使用"#followUp *"作为选择器（感谢您在his/her answer下的评论中指出这一点）。

淡出内容的问题在于，除非你做一些事情来对抗它，否则div将没有高度并快速关闭而不是根据需要滑动关闭。我的解决方案是淡化几乎隐形但不完全：

所以给出：

<div id="followUp">
    <div>Contents</div>
    <div>Click anywhere on these contents to trigger the effect</div>
</div>

然后：

var followUp = $('#followUp');
followUp.children().animate({
  opacity: 0.1,
  duration: 650
});
followUp.delay(650).slideToggle();

Live example

（我不会使用你的第二个例子（完成回调），因为完成回调将为“followUp”div包含的每个元素触发一次，这显然不是你想要的。）

Answer 2

也许这个：

$('#followUp *').fadeOut(650);
$('#followUp').delay(650).slideToggle();

另见example。

Answer 3

$.when(
  $('#followUp').css({
    height: $('#followUp').height()
  }).find('*').fadeOut(650)
).then(function () {
  $('#followUp').slideToggle();
});

也许？

备用版本（从zdrsh稍加提示）：

$('#followUp').css('height', '+=0px').children().fadeOut(650).promise().done(function () {
  $('#followUp').slideToggle();
});

fadeOut内容比slideToggle元素本身

3 个答案: