Jquery 动态添加类的元素已变得不可访问

我已经创建了一个电梯功能[有2层和相应的 每一个都有一个复选框。根据选中的复选框，电梯 舒德搬到那层楼去

我不确定如何实施的两件事是：

无论我在哪里动态地添加了类“unchecked”，元素看起来好像不是 可点击。如何使其可点击

橙色升降器在水平移动和停止时如何降低速度
复选框在哪里被选中

---

小提琴可在以下地点购买：[http://jsfiddle.net/hurricaneankit/rJ4Py/12/]我想这就是你要找的-

css-

---

它不应该是一个单选按钮，因为它只能在一层楼？而且，我不相信在复选标记上可以有动画。除非你在某处有自己的自定义检查图像。Hexxagonal，你能看看小提琴吗：非常感谢apaul34208…你能为我提供如何使复选框取消选中的输入吗[有点淡出以取消选中状态]当橙色电梯到达该复选框时。在新小提琴中，橙色电梯向上移动，但复选框未被选中或取消选中…请看一看。嗨，apaul34208…你能帮我解决这个问题吗…在新小提琴中，橙色电梯向上移动，但复选框未被选中或取消选中。什么浏览器我在JSFIDLE中添加了常见的浏览器前缀。请注意，淡入淡出效果在旧版本的IE上不起作用，因为不支持关键帧。

$(document).ready(function () {
    $("#check1, .checked1").click(function () {
        $('.checked1').addClass('fade');
        $('.checked2').removeClass('fade');
        $("#groundDiv").animate({
            "top": "0px"
        }, 2000);
    });
});
$(document).ready(function () {
    $("#check2, .checked2").click(function () {
        $('.checked2').addClass('fade');
        $('.checked1').removeClass('fade');
        $("#groundDiv").animate({
            "top": "-65px"
        }, 2000);  
    });
});

.fade{
    -webkit-animation: fade 3.5s;
    -moz-animation: fade 3.5s;
    -o-animation: fade 3.5s;
    animation: fade 3.5s;
}
@keyframes fade{
    0%{opacity:0;}
    50%{opacity:1;}
    100%{opacity:0;}
}