使用 jquery 切换不透明度

Question

为什么 .delay 在我的代码中不起作用？
代码应该

将 .sample 的不透明度切换为 0
等待 2 秒（使用 .delay）然后添加 class .bg_color
等待 2 秒，然后将 .sample 的不透明度切换回 1

HTML

<div class="sample"></div><br><br><br>
<button class="btn_1">Change</button>

CSS

.sample{
    padding:20px;
    background:skyblue;
    float:left;
}
.bg_color{
    background:red;
}

JQUERY

$(document).ready(function(){
    $(".btn_1").click(function(){
      $(".sample").css("opacity","0");
        $(".sample").delay(1000).addClass("bg_color");
        $(".sample").delay(1000).css("opacity","1");

    });
});

你可以找到我的 Fiddle here

Answer 1

您可以使用 setTimeout : http://jsfiddle.net/okkuvep7/1/

$(document).ready(function(){
    $(".btn_1").click(function(){
      $(".sample").css("opacity","0");

        setTimeout(function () {
            $(".sample").addClass("bg_color");
            $(".sample").css("opacity","1");        
        }, 1000);
    });
});

使用 jquery 切换不透明度

Switching opacity using jquery

html

css

jquery

opacity