使用jQuery的CSS技巧

Question

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

但问题是我的代码没有像我预期的那样执行 该页面现在显示：已加载＆gt;模糊＆gt;正常＆gt;模糊
预期页面：已加载＆gt;模糊＆gt;普通＆gt;模糊

段：

$(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课程，而不是.appfilter课程，我已将其留在那里以表明它只应用于重置模糊

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