Анимация gif на hover

Я искал ответ для этого, и я нашел его, но я не знаю, как его использовать.

Остановите загрузку gif-анимации, при наведении мыши начните активацию

Ответ Guffa на этот вопрос - именно то, что я хочу, но я не знаю, как использовать этот код.

У меня есть плагин jquery, но где я помещаю код (а не плагин, код, который был в ответе Гуффа)? Как использовать его для ссылок на изображения? Есть ли функция, которую я должен вызвать, чтобы заставить ее работать? Если да, то каков был бы лучший способ назвать это?

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

Ответ 1

Вот рабочий пример того, что вам нужно - http://jsfiddle.net/EXNZr/1/

<img id="imgDino" src="http://bestuff.com/images/images_of_stuff/64x64crop/t-rex-51807.jpg?1176587870" />

<script>
    $(function() {
        $("#imgDino").hover(
            function() {
                $(this).attr("src", "animated.gif");
            },
            function() {
                $(this).attr("src", "static.gif");
            }                         
        );                  
    });
</script>

Ответ 2

Я не читал ссылку, однако самый простой способ сделать это - изменить атрибут src тегов img с помощью javascript при наведении (jQuery)

$(function() {
    $('a').hover(function() {
      $(this).attr('src','path_to_animated.gif');
    },function() {
      $(this).attr('src','path_to_still.gif');
    }
});

Никаких плагинов не требуется... вы можете предварительно загрузить анимированный gif, добавив $('<img />',{ src: 'path_to_animated.gif'}); до привязки hover.

Надеюсь, что поможет

Ответ 3

Попробуйте это, если вы в порядке, чтобы использовать холст:

   <!DOCTYPE html>
    <html>
    <head>
        <style>
            .wrapper {position:absolute; z-index:2;width:400px;height:328px;background-color: transparent;}
            .canvas {position:absolute;z-index:1;}
            .gif {position:absolute;z-index:0;}
            .hide {display:none;}
        </style>

        <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

        <script>
            window.onload = function() {
                var c = document.getElementById("canvas");
                var ctx = c.getContext("2d");
                var img = document.getElementById("gif");
                ctx.drawImage(img, 0, 0);
            }

            $(document).ready(function() {
                $("#wrapper").bind("mouseenter mouseleave", function(e) {
                    $("#canvas").toggleClass("hide");
                });
            });
        </script>

    </head>
    <body>

    <div>
        <img id="gif" class="gif" src="https://www.macobserver.com/imgs/tips/20131206_Pooh_GIF.gif">

        <canvas id="canvas" class="canvas" width="400px" height="328px">
        </canvas>

        <div id="wrapper" class="wrapper"></div>
    </div>

    </body>
    </html>