gif startet die Wiedergabe auf schweben und Stoppt, wenn mouseout?

In Ihrem Fall, Ursache animation ist nicht kompliziert, ,meine Idee ist, platzieren Sie zwei Bilder auf einer Seite (animiert und nicht). Und Lesezeichen ein - /ausblenden bei mouseover/- out.

<div id="img_wrap" class="static">
    <img id="animated" src="animated.gif" alt="">
    <img id="static" src="static.jpg" alt="">
</div>

Skript:

$(function(){
    $('#img_wrap').on( 'mouseenter', function() {
         $(this).toggleClass('animated', 'static');
    })
})

CSS:

.animated #static, .static #animated {
    display: none;
}
.animated #animated, .static #static {
    display: inline;
}

Oder Sie können es auch mit einem einfachen CSS, wenn Sie nicht brauchen, eine Unterstützung für IE6, wich nicht löst hover Ereignis auf irgendetwas, aber <a>:

CSS:

#img_wrap #static, #img_wrap:hover #animated {
    display: inline;
}
#img_wrap #animated, #img_wrap:hover #static {
    display: none;
}

InformationsquelleAutor user907860

Wenn Sie wollen einfach nur, um zu zeigen, eine Feste, statische Bild, wenn es nicht animiert ist, dann ist es so einfach wie das ändern Sie das Bild auf hover (CSS oder JS).

Aber wenn Sie wollen, um tatsächlich frieren die animation am aktuellen frame auf der mouseout, dann besteht der einzige Weg, dies zu tun ist durch die Animation das Bild manuell, z.B. mit JS:

(function(){
  var imgDownload = $('#BtnDownload'), interval = 250;

  function startAnimation(img, interval, frameCount) {
    var src, prefix, ext, toId;
    if (frameCount) img.data('frames', frameCount);
    interval = interval || img.data('interval');
    src = img.attr('src').split('.');
    ext = src.pop();
    prefix = src.join('.');
    img.data('ext') || img.data('ext', ext);
    img.data('prefix') || img.data('prefix', prefix);
    restartAnimation(img, interval);
    img.hover(function() {
      restartAnimation(img, interval);
    });
    img.mouseout(function() {
      clearTimeout($(this).data('timeout-id'));
    });
  }
  function restartAnimation(img, interval) {
    todId = setTimeout(animate, interval, img);
    img.data('timeout-id', toId);
  }
  function animate(img) {
    var currentFrame, nextFrame, frameCount, prefix, ext;
    currentFrame = img.data('current-frame');
    frameCount = img.data('frames');
    prefix = img.data('prefix');
    ext = img.data('ext');

    nextFrame = currentFrame + 1;
    if (nextFrame >= frameCount) nextFrame = 0;
    img.data('current-frame', nextFrame);
    img.attr('src', prefix + (nextFrame? nextFrame : '') + '.' + ext);
  }

  startAnimation(imgDownload, interval);
)());

und den folgenden HTML-Code:

<img src="/img/btn_download.png" alt="Download" data-frames="6">

und diese Bilder:

/img/btn_download.png
/img/btn_download1.png
/img/btn_download2.png
/img/btn_download3.png
/img/btn_download4.png
/img/btn_download5.png

Hinweis:
Dies ist eine naive Implementierung. Für die Produktion code, den Sie möchten, laden Sie die Bilder oder nutzen Sie einfach spritemaps. Aber das grundlegende Konzept ist das gleiche—manuell animieren, das Bild/button, so dass, wenn Sie frieren die animation, es friert auf den aktuellen frame. Die alternative ist, mit so etwas wie jsgif, die verwendet XHR zum download der GIF-Datei, analysiert die Binärdaten zu extrahieren einzelner frames, und dann macht Sie mit HTML5 Canvas.

InformationsquelleAutor Lèse majesté