CSS3過渡鉻工作而已，不會在Safari和Mozilla合作

CSS3過渡鉻工作而已，不會在Safari和Mozilla工作。CSS3過渡鉻工作而已，不會在Safari和Mozilla合作

下面是代碼

<html> 
<head> 
    <title>Simple Fade-in/Fade-out animation</title> 
    <style type="text/css"> 
     /* Style for button */ 
     #myBtn 
     { 
      width:80px; 
     } 

     /* Style for image */ 
     #mainFrame 
     { 
      -webkit-transition: opacity 0.5s ease-in; 
      -moz-transition: opacity 0.5s ease-in; 
      -o-transition: opacity 0.5s ease-in; 
     } 
     #mainFrame.fade-out 
     { 
      opacity:0; 
     } 
     #mainFrame.fade-in 
     { 
      opacity:1; 
     } 

    </style> 
    <script type="text/javascript"> 
     function fade(btnElement) { 
      if (btnElement.value === "Fade Out") { 
       document.getElementById("mainFrame").className = "fade-out"; 
       btnElement.value = "Fade In"; 
      } 
      else { 
       document.getElementById("mainFrame").className = "fade-in"; 
       btnElement.value = "Fade Out"; 
      } 
     } 
    </script> 
</head> 
<body> 
    <h3>Simple fade-in/fade-out example</h3> 
    <input id="myBtn" type="button" value="Fade Out" onclick="fade(this);" /> 

    <iframe id="mainFrame" width="300" height="400" frameborder="0" src="http://www.youtube.com/embed/rT_OmTMwvZI" 
          allowfullscreen></iframe> 
</body> 
</html>

來源

2013-06-13 iJade

嘗試'btnElement.value == 「淡出」'而非'btnElement.value === 「淡出」'。 –

不工作..... – iJade

可以添加一個小提琴演示呢？ – SaurabhLP

也transition: opacity 0.5s ease-in;包括在你#mainFrame。

CSS過渡性質可以在沒有任何前綴提供商可以使用，但由於該規範只是在最近才實現穩定，供應商前綴仍然可以是必要的基於WebKit的瀏覽器。

Source

也

更改下面的CSS

#mainFrame.fade-out { 
    opacity:0; 
} 
#mainFrame.fade-in { 
    opacity:1; 
}

這個檢查一次：

.fade-out { 
    opacity:0; 
} 
.fade-in { 
    opacity:1; 
}

UPDATE2：（source）

添加?wmode=opaque到您的YouTube網址。在這裏工作得很好:)。

Working Fiddle

來源

2013-06-13 11:02:58

仍在瀏覽不工作...... – iJade

還檢查轉變你的瀏覽器支持HTTP – r1verside

：/ /html5test.com/ – r1verside

CSS3過渡鉻工作而已，不會在Safari和Mozilla合作

回答

相關問題