Question

我不是最熟练的编码，并且一直试图让这个功能正常工作几天，并希望有人可以帮助我...

这个想法是默认显示红色div，按“淡入淡出1”和“淡入淡出2”按钮调用蓝色/黄色div。当按下任一按钮时，红色div被隐藏，不会被要求。

当连续按下按钮时，当前代码会出错，它们要么不显示，要么淡化效果不起作用，要么显示红色div。

谢谢！

            <!DOCTYPE html>
            <html>
            <head>
                <style type="text/css">
                    .myBtn
                    {
                        width:80px;
                    }


                     #myImg0
                    {
                        -webkit-transition: opacity 0.5s ease-in;
                        -moz-transition: opacity 0.5s ease-in;
                        -o-transition: opacity 0.5s ease-in;
                        position:absolute;
                        background-color:red;
                        width: 100px;
                        height: 100px;
                    }
                    #myImg1
                    {
                        -webkit-transition: opacity 0.5s ease-in;
                        -moz-transition: opacity 0.5s ease-in;
                        -o-transition: opacity 0.5s ease-in;
                        position:absolute;
                        background-color:blue;
                        width: 100px;
                        height: 100px;
                    }

                    #myImg2
                    {
                        -webkit-transition: opacity 0.5s ease-in;
                        -moz-transition: opacity 0.5s ease-in;
                        -o-transition: opacity 0.5s ease-in;
                        position:absolute;
                        background-color:yellow;
                        width: 100px;
                        height: 100px;
                    }
                    #myImg1.fade-out
                    {
                        opacity:0;
                    }
                    #myImg1.fade-in
                    {
                        opacity:1;
                    }
                    #myImg2.fade-out
                    {
                        opacity:0;
                    }
                    #myImg2.fade-in
                    {
                        opacity:1;
                    }
                    .hide {display: none;}

                </style>
                <script type="text/javascript">
                    function fade1(btnElement) {
                        if (btnElement.value === "Fade Out") {
                            document.getElementById("myImg0").className = "fade-out";
                            document.getElementById("myImg2").className = "fade-out";
                            btnElement.value = "Fade In";
                        }
                        else {
                            document.getElementById("myImg1").className = "fade-in";
                            btnElement.value = "Fade Out";
                        }
                    }
                    function fade2(btnElement) {
                        if (btnElement.value === "Fade Out") {
                            document.getElementById("myImg0").className = "fade-out";
                            document.getElementById("myImg1").className = "fade-out";
                            btnElement.value = "Fade In";
                        }
                        else {
                            document.getElementById("myImg2").className = "fade-in";
                            btnElement.value = "Fade Out";
                        }
                    }
                </script>
            </head>
            <body>
                <input class="myBtn" type="button" value="Fade 1" onclick="fade1(myImg1);" />
                <input class="myBtn" type="button" value="Fade 2" onclick="fade2(myImg2);" />
                <div id="myImg0" ></div>
                <div id="myImg1" class="hide" ></div>
                <div id="myImg2" class="hide" ></div>

            </body>
            </html>

Answer 1

您可以像这样使用jquery - jsFiddle

$(document).ready(function () {
    $(".fade1").click(function () {
        $("#myImg1").fadeToggle();
        $("#myImg2").fadeOut();
    });
});
$(document).ready(function () {
    $(".fade2").click(function () {
        $("#myImg2").fadeToggle();
        $("#myImg1").fadeOut();
    });
});

Buggy在JavaScript / CSS中淡入/淡出代码

1 个答案: