Question

我在使用以下淡出代码时遇到了一些麻烦。

两个临时div（$ tempBackgroundTop，$ tempBackground）应该同时淡出，但是一个正在淡出另一个。

有什么想法吗？

干杯！

jQuery(document).ready(function () {

    jQuery("a.trigger").click(function (event) {
        event.preventDefault();

        var speed = 1e3,
            $body = jQuery("body"),
            $background = jQuery("#background"),
            $page = jQuery("#page"),
            $tempBackgroundTop = jQuery("<div/>").attr("id", "tempBackgroundTop").addClass("blueTop"),
            $tempBackground = jQuery("<div/>").attr("id", "tempBackground").addClass("blue");

        $page.after($tempBackgroundTop).after($tempBackground);
        $body.removeClass("blue").addClass("turquoise");
        $background.removeClass("blueTop").addClass("turquoiseTop");

        jQuery.when($tempBackgroundTop.fadeOut(speed), $tempBackground.fadeOut(speed)).done(function () {

            $tempBackgroundTop.remove();
            $tempBackground.remove();

        });
    });
});

Answer 1

这是因为你在另一个之前调用fadeout，试试这个：

var $tobefaded = jQuery("#tempBackgroundTop, #tempBackground");

jQuery.when($tobefaded.fadeOut(speed)).done(function () {...

这应该同时淡化它们。

Answer 2

每个浏览器可能会有所不同。尝试调整传入的毫秒数以使它们同步。

Answer 3

您是否尝试过使用jQuery 1.6来查看它是否解决了这个问题？请参阅发行说明中的此片段：

同步动画

在jQuery中你可以拥有多个   动画同时运行   （即使是同一个元素上的多个，   动画不同的属性）。在   1.6我们引入了一个增强功能，确保所有动画都是   同步到相同的计时器间隔。   这有可能创造   之前作为动画的问题可以   变得有点不同步（即使是一个   导致的几毫秒）   略微“关闭”动画。

淡出时间滑落jquery

3 个答案: