淡入淡出显示

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>

The two divisions are alternating in the same place.两个部门在同一个地方交替进行。 How can i make this alteration based on fade in and fade out.我怎样才能根据淡入淡出进行这种改变。 as in appear(fade in) and disappear (fade out) with a delay.如出现（淡入）和消失（淡出）延迟。 And is the method applicable for all the elements of the menu?该方法是否适用于菜单的所有元素？ Thank you谢谢

Answer 1

Just change your myFunction() like this:只需像这样更改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);
    });
}

try this, this will delay upto 300ms and wait for until fadeout, and it will began to fadein for 300ms试试这个，这将延迟多达 300 毫秒并等到淡出，然后它会开始淡入 300 毫秒

淡入淡出显示

问题描述

2 个解决方案

解决方案1
1 2015-06-12 08:16:03

解决方案2
1 2015-06-12 08:24:28

淡入淡出显示

问题描述

2 个解决方案

解决方案1 1 2015-06-12 08:16:03

解决方案2 1 2015-06-12 08:24:28

解决方案1
1 2015-06-12 08:16:03

解决方案2
1 2015-06-12 08:24:28