I successfully implemented a toggle audio button on my website, but now I would like it to fade in along with the scroll-to-top button that I also have (which operates similarly to the buttons on scrolltotop.com). Is there a simple way to achieve this?
Here is the HTML code I currently have:
<div id='cornerplayer'>
<center>
<div id='cornericon'></div>
<div>
</div>
<img src=http://www.thegeekypixel.com/files/theme/Images/noaudio.png onclick="javascript:toggleSound();this.src = this.src == offImg ? onImg : offImg;">
<audio id="audio" loop>
<source src="http://www.thegeekypixel.com/files/theme/Music/TellMe-Killercatsfeat.AlexSkrindo.mp3">
</audio>
<script type="text/javascript">
function toggleSound() {
var audioElem = document.getElementById('audio');
if (audioElem.paused)
audioElem.play();
else
audioElem.pause();
}
var onImg = "http://www.thegeekypixel.com/files/theme/Images/noaudio.png";
var offImg = "http://www.thegeekypixel.com/files/theme/Images/audioplaying.png";
</script>
</div>
</center>
</div>
</div>
<div>
I have created a JSFiddle demonstration here.
The button I am trying to make fade in is the "cornerplayer" button that plays music when clicked and floats in the bottom right corner of the screen.
Is there a straightforward method to make it fade in synchronously with the scroll-to-top button?
Thank you, Oliver
P.S. Apologies for any errors, I am not very familiar with coding.