0

I want to make a music playlist and when I press the play button the gif starts, and when I pause the song I want it to stop. When I start a new song, the gif starts too. I can't figure out how to do it. The gif needs to be paused, not returned to the start. Thanks

lexicore
  • 42,748
  • 17
  • 132
  • 221
kevinS
  • 5
  • 2
  • 8
  • See here: http://superuser.com/questions/39895/pausing-a-gif-animation-in-google-chrome & http://stackoverflow.com/questions/5818003/stop-a-gif-animation-onload-on-mouseover-start-the-activation – webmonkey Dec 15 '16 at 10:22
  • Why not use two images: one static and one gif; then switch? – srifqi Dec 15 '16 at 10:22

1 Answers1

0

You should use two different images for this (one is jpg an d another is gif) and using jQuery, onclick play and pause button just change the src of the images like:

HTML:

<img src="Your gif image">
<a href="#" class="playbutton"></a>
<a href="#" class="pausebutton"></a>

JQUERY:

$(document).ready(function(){
  $(".playbutton").click(function(){
   $("img").attr("src","GIF IMAGE SOURCE");//EXAMPLE
  });

  $(".pausebutton").click(function(){
   $("img").attr("src","JPG IMAGE SOURCE");//EXAMPLE
  });
 });
Taniya
  • 550
  • 2
  • 7
  • what is the rest of the html and css of this? I think i'm close but it doesn't work. – kevinS Dec 15 '16 at 10:39
  • You need to add in your html and your two buttons with classname "playbutton" and "pausebutton" respectively . Add that jQuery code in your page. That JQuery code should be within $(document).ready(function(){ }); – Taniya Dec 15 '16 at 10:44