javascript - 回调无法正常工作

Question

我不知所措。在这段代码中，#options 应该逐渐淡入，但事实并非如此。但是，CSS 属性已设置。

$("#content > p").animate({ opacity: '0' }, function() {
    $(this).css("display", "none");
    $("#options").css("opacity", "0").show(0, function() {
        $("#options").fadeIn();
    });
});

Answer 1

似乎它应该可以工作，但显然您需要使用fadeTo()^[docs]方法而不是fadeIn()^[docs]方法。

$('img').css("opacity", 0).show(0,function() {
    $(this).fadeTo(400, 1);
});

---

虽然在show(0,func..这里似乎有点毫无意义，但当你可以这样做时：

$('img').css("opacity", 0).show().fadeTo(400, 1);

...除非0您在.show()持续时间内给出的实际上是一个可能引用更大数字的变量。

Answer 2

opacity仍被设置0为.

您可以将其更改fadeIn()为...

$("#options").animate({ opacity: 1}, 500);

js小提琴。

Answer 3

您可以大大简化您的代码 - 请记住将 opacity 设置为 0 将复制visibility:hiddenCSS 属性，而fadeOut()将复制display:noneCSS 属性。这两者之间的一个关键区别是后者将从渲染的 DOM 中删除元素，因此它不会占用屏幕上的空间，并且周围的节点甚至不会知道它在那里。前者将创建一个大的空框，其中元素仍然存在，但您看不到它。假设您想使用最常见的后者，这应该有效：

$('#content > p').fadeOut('slow', function() {
    $('#options').fadeIn();
});