将过渡添加到“；熄灯“；效果（css jQuery）

我正在尝试实现本教程中显示的“熄灯”效果：

我现在已经成功了。 但是我想添加一个过渡效果（使用css），这样切换就可以顺利进行，并具有很好的淡入淡出效果

任何提示都会有帮助。。。这是我正在尝试的代码，但我真的没有线索

这将是我对jquery的尝试：

    $(document).ready(function(){
    $("#ampolleta").css("height", $(document).height()).hide();
    $(".lightSwitcher").click(function(){
    $("#ampolleta").css("transform","opacity("+$(this).index() * -0.3+"s)");
        $("#ampolleta").toggle();
        if ($("#ampolleta").is(":hidden"))
            $(this).html("Turn off the lights").removeClass("turnedOff");
        else
            $(this).html("Turn on the lights").addClass("turnedOff");
    });
     });

这就是css：

    #ampolleta{
    position:absolute;
    left:0;
    top:0; 
    height: 768px;
    width: 100%;
    background: black;
    opacity: 0.75; 
    filter: alpha(opacity = 75); 
    zoom:1; 
    -webkit-transition: opacity 0.3s ease-in-out;
    -moz-transition: opacity 0.3s ease-in-out;
    -o-transition: opacity 0.3s ease-in-out;
    transition: opacity 0.3s ease-in-out;
    z-index: 100;
    }


   .lightSwitcher {
    position:absolute;
    z-index:101;
    text-decoration: none;
    }

.turnedOff {color:#ffff00; background-image:url(light_bulb.png);}

正如您可能会注意到的，我有点困惑，我真的不知道如何将jquery代码与css的转换结合起来，但我直觉认为转换应该来自css而不是jquery

因此，任何可能有用的方法转变都将得到考虑

---

谢谢

你能不能也发布HTML或者设置一个网页？使测试和帮助您变得更容易。好的，我试试看！谢谢过一会儿我会把它贴在这里的，我把它放在了一把小提琴里，但是因为整个html会非常混乱。。。。现在有点破了。。。。但我希望这能有所帮助