我想用SVG製作一個JavaScript矢量動畫。在開始時,有一個播放按鈕。當它被按下時,它開始播放音樂,並且應該隱藏自己。用javascript隱藏SVG元素
這是我的HTML:
<audio>
<source src="song.mp3" type="audio/mp3" />
</audio>
<svg id="canvas" xmlns:html="http://www.w3.org/1999/xhtml">
<!-- Definitions -->
<defs>
<linearGradient id="white-grey" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#F5F5F5;stop-opacity:1" />
<stop offset="100%" style="stop-color:#D9D9D9;stop-opacity:1" />
</linearGradient>
<linearGradient id="grey-white" x1="0%" y1="100%" x2="0%" y2="0%">
<stop offset="0%" style="stop-color:#F5F5F5;stop-opacity:1" />
<stop offset="100%" style="stop-color:#D9D9D9;stop-opacity:1" />
</linearGradient>
</defs>
<g id="play-button" onclick="start()">
<rect x="300" y="200" rx="20" ry="20" width="200" height="100"
fill="url(#white-grey)" stroke="#5E5E5E" stroke-width="2">
</rect>
<text x="361" y="259" fill="#5E5E5E" font-size="30">
PLAY
</text>
</g>
</svg>
這是我的javascript:
function start() {
try {
$('audio').currentTime=0;
}
catch(e) {}
$('audio').play();
$('#play-button').css({"visibility":"hidden"});
}
我找到的代碼,其播放音樂的第一部分。但是,播放按鈕不被隱藏。什麼問題?
愚蠢的問題,但的ID輸出的元素仍然是播放按鈕? – Alex 2014-11-24 13:27:57
是的,它仍然是播放按鈕 – user2397282 2014-11-24 13:30:47