jquery - 将 Gif 动画添加到复选框

Question

我找到了很好的代码，可以风格化复选框。

HTML:

<input id="checkbox" type="checkbox" class="checkbox" />
<label id="checkbox_lab" for="checkbox" class="checkbox_lab"></label>

CSS:

.checkbox {
    display: none;
}
.checkbox_lab {
    background: url("images/off.png") no-repeat;
    height: 28px;
    width: 81px;
    display: block;
}
.checkbox_lab_sel {
    background: url("images/on.png") no-repeat;
}

Javascript(使用 jquery):

    $(document).ready(function(){
        $(".checkbox").change(function(){
            if($(this).is(":checked")){
                $(this).next("label").addClass("checkbox_lab_sel");
            }else{
                $(this).next("label").removeClass("checkbox_lab_sel");
            }
        });
    });

它工作得非常好。我想要“从打开到关闭的漂亮切换动画，反之亦然”，它保存在动画 gif 中，但是......我不是很擅长 JS，也不知道该怎么做。有人知道吗？

Answer 1

这里有一个快速 example

HTML

<input id="checkbox" type="checkbox" class="checkbox" />
<label id="checkbox_lab" for="checkbox" class="checkbox_lab"></label>​

CSS

.checkbox {
    /*display: none;*/
}
.checkbox_lab {
    background: url("images/off.png") no-repeat;
    height: 28px;
    width: 81px;
    display: block;
}
.checkbox_lab_sel {
    background-image: url('http://cdn.rpxnow.com/rel/img/9a8269421303631316be4ab5e34870e1.gif');
}​

Javascript

$(".checkbox").change(function(){
    $('#checkbox_lab').toggleClass('checkbox_lab_sel');
        });​

希望这对您有所帮助!