Question

如何与jQuery fadeIn同时运行CSS3过渡？

我正在尝试使模式弹出淡入，同时覆盖也会在页面上淡入淡出。

目前，叠加在延迟5秒后消失（5000）。然而关键帧动画直到5年后才开始？我希望他们两个同时开始。

叠加层的转换编码如下：

$(document).ready(function () {
    $(".modal-newsletter-wrap").delay(5000).fadeIn(1000);
    window.setTimeout(function(){$(".page-wrap").addClass("blur");}, 5000);
});

模态弹出窗口编码如下：

.modal-newsletter {
    opacity: 0;
    animation: fx 1s linear 5s 1 forwards;
}

如果它们都设置为5s / 5000那么为什么jQuery首先完全播放，然后5s后关键帧动画开始播放？

这里有完整的工作示例：https://jsfiddle.net/5ho8j78d/6/

Answer 1

除非另有说明，否则效果会自动放在效果队列的末尾。切换顺序，模糊将首先发生。

为了使它们同时显示，您可以这样做：

<强> CSS

.modal-newsletter-wrap {
    opacity:0;

<强>的jQuery

$(document).ready(function () {
    window.setTimeout(function(){
        $(".page-wrap").addClass("blur");
        $(".modal-newsletter-wrap").animate({
            queue: false,
            opacity: 1  
          },1000);
    }, 5000);

});

jsFiddle

如何使用CSS3与jQuery同时运行关键帧动画

1 个答案: