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而不是jquery ......

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

谢谢！

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

0 个答案: