Методы jquery fadein / fadeout не работают

Я хочу, чтобы изображение исчезло при наведении курсора. Почему это не работает?

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
    $("#lightbulb").hover(function(){
      $("#lightbulb").fadeOut('fast');
    },function(){
      $("#lightbulb").fadeIn();
    });
  });
</script>

Другие методы jQuery, такие как стили CSS и изменение источников изображений, работают.

Где элемент #lightbulb? Кроме того, если элемент не затенен, вы вообще не сможете его навести, так как он не занимает места в DOM.

Rory McCrossan 10.08.2018 17:01

Рори МакКроссан -> Спасибо за помощь! Как вы предлагаете мне это сделать?

nirbhay 10.08.2018 17:05

Я не знаю, не увидев информацию, которую я просил в моем предыдущем комментарии ...?

Rory McCrossan 10.08.2018 17:05
3
3
45
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Вы можете использовать css вместо jQuery, если это сработает. Когда вы fadeOut элемент, запускается событие выхода при наведении курсора, поэтому он будет просто переключаться между состояниями так, как вы это делаете. Вот рабочий пример с примером скрытия / отображения при наведении курсора. В основном тебе нравится

#elem {
     opacity: 1;
     transition: opacity: 0.2s;
}

#elem:hover {
    opacity: 0;
}

на любом элементе, который вы хотите скрыть.

Это нормально работает, но я также хочу постепенно менять источник изображения.

nirbhay 10.08.2018 17:13
Ответ принят как подходящий

Вы не можете разместить эффект fadeOut () в том же элементе, к которому вы добавляете hover (). fadeOut () устанавливает для Элемента значение «display: none;» и удаляет его из DOM. Таким образом, эффект $ fadeIn () никогда не может иметь место, потому что элемент с целевым значением $ hover () исчез.

Вам нужно настроить таргетинг на родительский контейнер с внутренними элементами hover () и fadeIn () и fadeOut (). Это должно сработать.

$("#parentbulb").hover(function(){
    $("#lightbulb").fadeOut('fast');
  },function(){
    $("#lightbulb").fadeIn();
});

Другие вопросы по теме