使用 jquery 切换不透明度

Question

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

1. 将.sample的不透明度切换为0
2. 等待2s（使用.delay）然后添加类.bg_color
3. 等待 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");

    });
});

你可以找到我的小提琴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);
    });
});