CSS 技巧 jQuery

Question

今天是愚人节，我想用 CSS3 模糊来欺骗我的访客。模糊应持续 2 秒并在 1 秒内恢复正常。

但问题是我的代码没有按预期执行。
现在显示的页面：加载 > 模糊 > 正常 > 模糊
预期页面：已加载 > 模糊 > 正常 ~~> 模糊~~

片段：

$(document).ready(function() {
    $(".apffilter").addClass("animae");
    
    window.setTimeout(function(){
        $(".apffilter").removeClass("animae");
   }, 3000);
});

.apffilter {
  filter:blur(1px);
  -webkit-filter:blur(1px);
  -moz-filter:blur(1px);
  -o-filter:blur(1px);
  -ms-filter:blur(1px);
    
  -webkit-transition: all 2.0s linear 1.0s;
  -moz-transition: all 2.0s linear 1.0s;
  -ms-transition: all 2.0s linear 1.0s;
  -o-transition: all 2.0s linear 1.0s;
  transition: all 2.0s linear 1.0s;
}

.apffilter.animae {
   filter:blur(0px);
  -webkit-filter:blur(0px);
  -moz-filter:blur(0px);
  -o-filter:blur(0px);
  -ms-filter:blur(0px);
}

<div class="apffilter">
    <img src="http://www.etnforum.com/templates/thewei-zz3/images/etnDiamond2015.png" /><br /><br />
    Happy April Fool's Day!
</div>

Answer 1

见下文，您只将模糊添加到 .animae class，而不是 .appfilter class，我把它留在那里只是为了显示它应该用于重置模糊

Click here to see a fiddle of it in action

$(document).ready(function() {
    $(".apffilter").addClass("animae");
    
    window.setTimeout(function(){
        $(".apffilter").removeClass("animae");
   }, 3000);
});

.apffilter {
  filter:blur(0px);
  -webkit-filter:blur(0px);
  -moz-filter:blur(0px);
  -o-filter:blur(0px);
  -ms-filter:blur(0px);
    
  -webkit-transition: all 2.0s linear 1.0s;
  -moz-transition: all 2.0s linear 1.0s;
  -ms-transition: all 2.0s linear 1.0s;
  -o-transition: all 2.0s linear 1.0s;
  transition: all 2.0s linear 1.0s;
}

.apffilter.animae {
   filter:blur(1px);
  -webkit-filter:blur(1px);
  -moz-filter:blur(1px);
  -o-filter:blur(1px);
  -ms-filter:blur(1px);
}

<div class="apffilter">
    <img src="http://www.etnforum.com/templates/thewei-zz3/images/etnDiamond2015.png" /><br /><br />
    Happy April Fool's Day!
</div>

Answer 2

这里的 JS 效果很好。只需替换 addclass 事件。

JQuery

$(document).ready(function () {
        $(".apffilter").removeClass("animae");

        window.setTimeout(function () {
            $(".apffilter").addClass("animae");
        }, 3000);
    });

为了OP的要求，这里也添加了Demo！

        $(document).ready(function () {
            $(".apffilter").removeClass("animae");

            window.setTimeout(function () {
                $(".apffilter").addClass("animae");
            }, 3000);
        });

.apffilter {
  filter:blur(0px);
  -webkit-filter:blur(1px);
  -moz-filter:blur(1px);
  -o-filter:blur(1px);
  -ms-filter:blur(1px);
    
  -webkit-transition: all 2.0s linear 1.0s;
  -moz-transition: all 2.0s linear 1.0s;
  -ms-transition: all 2.0s linear 1.0s;
  -o-transition: all 2.0s linear 1.0s;
  transition: all 2.0s linear 1.0s;
}

.apffilter.animae {
   filter:blur(1px);
  -webkit-filter:blur(0px);
  -moz-filter:blur(0px);
  -o-filter:blur(0px);
  -ms-filter:blur(0px);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="apffilter">
    <img src="http://www.etnforum.com/templates/thewei-zz3/images/etnDiamond2015.png" /><br /><br />
    Happy April Fool's Day!
</div>

Here is the working model

CSS 技巧 jQuery

CSS Trick with jQuery

css

jquery

blur

JQuery