play/stop gif on click using javascript

Question

Я хочу, чтобы gif играл при нажатии и останавливался при повторном нажатии. Я следую этот метод: http://www.hongkiat.com/blog/on-click-animated-gif/

До сих пор у меня есть:

HTML

<figure> 
<img src="test.png" alt="Static Image" data-alt="test.gif"/> 
</figure> 

<script src="playGif.js" type="text/javascript"></script> 

playGif.js

(function($) { 
    // retrieve gif 
    var getGif = function() { 
     var gif = []; 
     $('img').each(function() { 
      var data = $(this).data('alt'); 
      gif.push(data); 
     }); 
     return gif; 
    } 
    var gif = getGif(); 

    // pre-load gif 
    var image = []; 
    $.each(gif, function(index) { 
     image[index]  = new Image(); 
     image[index].src = gif[index]; 
    }); 

    // swap on click 
    $('figure').on('click', function() { 
     var $this = $(this), 
      $index = $this.index(), 
      $img = $this.children('img'), 
      $imgSrc = $img.attr('src'), 
      $imgAlt = $img.attr('data-alt'), 
      $imgExt = $imgAlt.split('.'); 

     if($imgExt[1] === 'gif') { 
      $img.attr('src', $img.data('alt')).attr('data-alt', $imgSrc); 
     } else { 
      $img.attr('src', $imgAlt).attr('data-alt', $img.data('alt')); 
     } 
    }); 
})(jQuery); 

Вместо того, чтобы поменять местами содержимое ЦСИ и данных- alt, это только помещает data-alt в src, а data-alt остается неизменным.

GIF воспроизводится по щелчку, но если нажать снова, он перезагружает gif вместо того, чтобы возвращаться к png (по крайней мере, в Chrome и Firefox. IE просто ничего не делает при последующих кликах).

Answer 1

Так вот готовый jsfiddle: https://jsfiddle.net/2060cm1c/

Это простая переменная проблема подкачка:

a=1;b=2; 
a=b;// now a=2 
b=a;// a=2, b=a=2 

Чтобы решить эту проблему, необходимо временную переменную:

a=1;b=2; 
temp=a;a=b; 
b=temp; 

Решая проблема ОП:

var temp=$img.attr('src'); 
$img.attr('src', $imgAlt).attr('data-alt', temp); 

Итак, проблема такая же простая, как замена двух переменных. Вы не нуждаетесь в if, чтобы проверить расширение.