使用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);
    });
});