jquery change image src on click, and revert to original image on second click

Question

Long time lurker.. first post.

I'm looking to make a play/pause button that animates on hover, and that changes from 'play' to 'pause' button on click. (I'm using it to trigger an audiofile)

i have this working by stacking two different coloured images and have a transition in CSS (opacity) on mouse over.

I have been struggling to change the src on click in javascript/jquery, which i managed to get to work (play button turns into pause button, css transition still functional) but i have no clue how to make a conditional if/then statement to have it revert back to the original 'play' button images on the next click.

I've tried quite a few things and feel that i'm close, but since i have little to no experience in javascript/jquery, I have no clue how to proceed.

I hope that my question is somewhat understandable and I'd very much appreciate any help i can get!

 $("document").ready(function() { $("#playpause").click(function() { $("#top").attr("src", "//placehold.it/100?text=play"); $("#bottom").attr("src", "//placehold.it/100?text=pause"); }); }); 

 #playpause { position: relative; height: 24px; width: 24px; margin: 5px 10px 0 0; } #playpause img { position: absolute; left: 0; -webkit-transition: opacity 0.7s ease-in-out; -moz-transition: opacity 0.7s ease-in-out; -o-transition: opacity 0.7s ease-in-out; transition: opacity 0.7s ease-in-out; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } #playpause img.top:hover { opacity: 0; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="playpause" class="one column"> <a id="flytonight" href="#"> <img class="bottom" id="bottom" src="//placehold.it/100?text=play" /> <img class="top" id="top" src="//placehold.it/100?text=pause" /> </a> </div> 

Answer 1

I'm sorry I did not pay enough attention to your question, this would be a solution:

var playToggle = false;
    $("#playpause").click(function() {
            if (playToggle === true){
               $("#top").attr("src", "//placehold.it/100?text=play");
               $("#bottom").attr("src", "//placehold.it/100?text=pause");
            else{
               $("#bottom").attr("src", "//placehold.it/100?text=play");
               $("#top").attr("src", "//placehold.it/100?text=pause");
            }
        playToggle = !playToggle;
      });

Answer 2

You just need to check the current src attribute in each click , and change it accordingly. You will be always switching between the two src values.

$("document").ready(function() {
  $("#playpause img").click(function() {
    if ($(this).attr("src") === "//placehold.it/100?text=play")
      $(this).attr("src", "//placehold.it/100?text=pause");
    else if ($(this).attr("src") === "//placehold.it/100?text=pause")
      $(this).attr("src", "//placehold.it/100?text=play");
  });
});

Demo:

 $("document").ready(function() { $("#playpause img").click(function() { if ($(this).attr("src") === "//placehold.it/100?text=play") $(this).attr("src", "//placehold.it/100?text=pause"); else if ($(this).attr("src") === "//placehold.it/100?text=pause") $(this).attr("src", "//placehold.it/100?text=play"); }); }); 

 #playpause { position: relative; height: 24px; width: 24px; margin: 5px 10px 0 0; } #playpause img { position: absolute; left: 0; -webkit-transition: opacity 0.7s ease-in-out; -moz-transition: opacity 0.7s ease-in-out; -o-transition: opacity 0.7s ease-in-out; transition: opacity 0.7s ease-in-out; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="playpause" class="one column"> <a id="flytonight" href="#"> <img class="bottom" id="bottom" src="//placehold.it/100?text=play" /> </a> </div>