巴吉淡入在JavaScript /輸出碼/ CSS

我不是最精通編碼，並已停留在試圖讓這個功能對於天權的工作，並希望有人能夠幫助我......巴吉淡入在JavaScript /輸出碼/ CSS

這個想法是默認顯示紅色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>

來源

2013-04-07 Sarah

一個的jsfiddle演示將是有益的。 – 2013-04-07 22:49:48

您可以使用jQuery像這 - jsFiddle

$(document).ready(function() { 
    $(".fade1").click(function() { 
     $("#myImg1").fadeToggle(); 
     $("#myImg2").fadeOut(); 
    }); 
}); 
$(document).ready(function() { 
    $(".fade2").click(function() { 
     $("#myImg2").fadeToggle(); 
     $("#myImg1").fadeOut(); 
    }); 
});

來源

2013-04-07 21:57:55 apaul

海報似乎並未使用jQuery。 – 2013-04-07 22:05:52

@ apaul34208！謝謝！完美的作品！：D – Sarah 2013-04-08 07:59:19

@ apaul34208我會完全抱住你，如果我可以* ^^ * – Sarah 2013-04-08 10:14:19

巴吉淡入在JavaScript /輸出碼/ CSS

回答

相關問題