0

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

我现在已经成功了。但我想添加一个过渡效果（使用 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...

因此，将考虑任何有用的方法转变。

谢谢！！

4

0 回答 0