1

私はコーディングが得意ではなく、この機能を何日も正しく機能させるのに苦労しており、誰かが私を助けてくれることを願っています...

赤の div がデフォルトで表示され、青/黄色の div が「フェード 1」および「フェード 2」ボタンを押すことによって呼び出されるという考え方です。いずれかのボタンを押すと、赤い 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 に答える