淡入淡出顯示

<!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>

兩個部門在同一個地方交替出現。我如何根據淡入淡出來進行這種改變。如出現（淡入）並消失（淡出）。該方法是否適用於菜單的所有元素？謝謝淡入淡出顯示

來源

2015-06-12 mikeb

莫非你添加_ [Fiddle]（http://fiddle.jshell.net/）_？ –

http://jsfiddle.net/ct7c5a3b/ – adeneo

你們不需要小提琴！ *認真！* –

只要改變你的myFunction()這樣的：

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

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

來源

2015-06-12 08:16:03

好，但這適用於上述菜單的所有元素？我怎麼能延遲淡入和淡出因素？ – mikeb

@randy給班！ –

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

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

試試這個，這將延遲高達300ms的等待，直到淡出，它會開始淡入300毫秒

來源

2015-06-12 08:24:28 Selva

好吧，我和你在這上面，但是這個方法可以在上面菜單的所有元素上完成嗎？我怎麼能延遲淡入和淡出因素？ – mikeb

這個怎麼需要做的，你可以提一下淡入淡出的元素 – Selva

是的，他們是在我的代碼菜單 – mikeb

淡入淡出顯示

回答

相關問題