Question

<!DOCTYPE html>
<html>
<head>
   <style> 
        #myDIV {
            width: 500px;
            height: 500px;
            display: none;
        }

        #second {
            width: 500px;
            height: 500px;
            background-color: lightblue;
            display: none;
        }
    </style>  
    </head>
    <body>

    <div id="menu" class="menu">
        <ul class="headlines">
            <li id="item1"onclick="checklist(this)"><button onclick="myFunction()">Home</button></li>
            <li id="item2"><button onclick="myFunction2()">About </button></li>
            <li id="item3">Contact us     </li>
            <li id="item4">asda     </li>
            <li id="item5">dfgdfgd</li>
            <li id="item6">sdfghs    </li>
            <li id="item7">sghsfhs    </li>
        </ul>
        </div>
        <div id="myDIV">
             <img src="j.png">
        </div>
        <div id="second">
             This is my DIV2 element.
        </div>
        <script>
           function myFunction() {
                document.getElementById("myDIV").style.display = "block";
                document.getElementById("second").style.display = "none";
           }
       </script>

       <script>
           function myFunction2() {
               document.getElementById("second").style.display ="block";
               document.getElementById("myDIV").style.display = "none";
           }
       </script>
   </body>
</html>

这两个部门在同一个地方交替进行。如何根据淡入和淡出进行此更改。如出现（淡入）并消失（淡出）延迟。并且该方法适用于菜单的所有元素吗？谢谢

Answer 1

只需像这样更改myFunction()：

function myFunction() {
    $("#myDIV").fadeIn();
    $("#second").fadeOut();
}

function myFunction2() {
    $("#second").fadeIn();
    $("#myDIV").fadeOut();
}

Answer 2

function myFunction() {
    $("#second").fadeOut(300, function(){
        $("#myDIV").fadeIn(300);
    });
}

function myFunction2() {
   $("#myDIV").fadeOut(300, function(){
        $("#second").fadeIn(300);
    });
}

试试这个，这将延迟300毫秒并等待直到淡出，它将开始淡化300毫秒

淡入淡出并显示淡出

2 个答案: