jquery - 「消灯」効果への遷移を追加します（css jQuery）

Question

このチュートリアルに示されている「ライトアウト」効果を実装しようとしています。

私は今までに成功しています。しかし、トランジション効果（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ではなくcssから取得する必要があるという直感があります。 jquery..。

したがって、有用となる可能性のあるアプローチの変化が考慮されます。

ありがとう！！