Как правильно спрятать div при наведении курсора при попытке сделать gif-файл при запуске при наведении курсора

Question

Как правильно спрятать div при наведении курсора при попытке сделать gif-файл при запуске при наведении курсора

0

Я новичок в кодировании и собрал некоторые вещи вместе. Я пытаюсь запустить gover на hover. Исходное изображение является статическим, и когда вы наводите gif, начинает играть. Я получил эту работу отлично, но я хочу наложить поверх статического изображения, как кнопка "наведите меня". Когда я нависаю над наложением, он не запускает gif, потому что я не вишу над статическим изображением. Когда я делаю отображение наведения: ни один для наложения он просто не мерцает.

Вот ссылка на то, что у меня есть до сих пор:

<div class="container">
<div class="overlay">TEST   </div>
    <img src="http://fdfranklin.com/gif1.jpg" alt="" id="static">
</div>

(Новое для stackoverflow, поэтому не уверен, как показать css/JS здесь ссылка jsfiddle)

http://jsfiddle.net/T6GEn/

Если вы избавитесь от наложения div, gif правильно играет при наведении. Я действительно хочу, чтобы это было так, как сейчас, вы наведите курсор, и наложение исчезает и начинает играть в gif.

Есть идеи? Вся помощь, очень ценится.

user3324440 18 фев. 2014, в 18:29

Источник

0

GIF не работает в JSFiddle - Chrome 32
Paulie_D 18 фев. 2014, в 16:52
0

@Paulie_D: Конечно, они делают: jsfiddle.net/7t66L
Nope 18 фев. 2014, в 17:03
0

Не когда я проверял скрипку ОП, но ОК
Paulie_D 18 фев. 2014, в 17:06
0

@Paulie_D: Конечно, скрипта OPs не работает, и это причина вопроса в первую очередь. Ничего общего с инструментом jsFiddle или версией Chrome. Когда OP переключает jpg с помощью gif gif не начинает играть, и OP хотел бы знать, как заставить его начать играть после переключения.
Nope 18 фев. 2014, в 17:21
0

Ах, моя ошибка ... Я неправильно понял.
Paulie_D 18 фев. 2014, в 17:22

Показать ещё 3 комментария

Теги:

javascript

jquery

html

css

hover

4 ответа

1

Я бы сделал следующее. Вместо того, чтобы иметь только один img, создайте два, один статический и один анимированный. Скрыть анимированное изображение по умолчанию и показывать только, когда вы нависаете над наложением. Например

<div class="container">
  <div class="overlay"><p>TEST</p> </div> 
  <img src="http://fdfranklin.com/gif1.jpg" alt="" id="static">
  <img src="http://i.imgur.com/ytWYljT.gif" alt="" id="animated" style="display: none;">
</div>

а потом

$(".overlay").hover(
  function()
  {
     $("#static").hide();
     $("#animated").show();
  },
  function()
  {
    $("#static").show();
    $("#animated").hide();
  }
);

Kiran 18 фев. 2014, в 14:50

0

Ваша проблема в том, что событие "hover" происходит с div OVERLAY вместо # статического изображения. Вы захотите изменить свой JS следующим образом:

 $('.overlay).hover();

См. Здесь полное решение: JSFiddle

binaryatrocity 18 фев. 2014, в 15:39

0

Вы могли бы сделать что-то вроде этого:

$(".container").hover(
    function(){
        $(".overlay").fadeOut(300);           
        $(this).find("img").attr("src", "http://i.imgur.com/ytWYljT.gif");
    },
    function()      {
        $(this).find("img").attr("src", "http://fdfranklin.com/gif1.jpg");
         $(".overlay").fadeIn(300);
    }
);

Демо-версия JSFiddle

Nick R 18 фев. 2014, в 14:19

Ещё вопросы

@Paulie_D: Конечно, они делают: jsfiddle.net/7t66L
Не когда я проверял скрипку ОП, но ОК
@Paulie_D: Конечно, скрипта OPs не работает, и это причина вопроса в первую очередь. Ничего общего с инструментом jsFiddle или версией Chrome. Когда OP переключает jpg с помощью gif gif не начинает играть, и OP хотел бы знать, как заставить его начать играть после переключения.
Ах, моя ошибка ... Я неправильно понял.

Bic · Accepted Answer · 2014-02-18T15-19-00.000Z

Вы никогда не скрываете оверлейный div и, следовательно, не зависаете с gif. Просто установите начало, когда вы наведете наложение:

$(document).ready(function()
{
    $(".overlay").hover(
        function()
        {
            $('#static').attr("src", "http://i.imgur.com/ytWYljT.gif");
        },
        function()
        {
            $('#static').attr("src", "http://fdfranklin.com/gif1.jpg")
        }
    );  
});

скрипка

Спасибо! Это сработало. Ценить это.
Итак, примите ответ, если он вам подходит, чтобы все могли видеть решение .. @ user3324440