1

我不是最精通编码的人，几天来一直试图让这个功能正常工作，希望有人能帮助我......

这个想法是默认显示红色 div，并通过按下“fade 1”和“fade 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>
4

1 回答 1

0

你可以像这样使用 jquery - jsFiddle

$(document).ready(function () {
    $(".fade1").click(function () {
        $("#myImg1").fadeToggle();
        $("#myImg2").fadeOut();
    });
});
$(document).ready(function () {
    $(".fade2").click(function () {
        $("#myImg2").fadeToggle();
        $("#myImg1").fadeOut();
    });
});
于 2013-04-07T21:57:55.853 回答