Событие click и scroll не отрабатывают

249

16 декабря 2017, 05:57

Доброго времени суток. Моя проблема состоит в том, что не срабатывает повторно событие click.

Допустим у меня поверх гугл карт есть картинка фоновая. По клику на неё я делаю ей opacity в ноль, с .animate в 2 секунды и прячу картинку .hide. По скролу возвращаю opacity в единицу и показываю картинку .show. Если кликнуть опять по картинке, то повторный клик не отрабатывает, бывает, что отрабатывает через 5-10 секунд после клика.

https://jsfiddle.net/yhzqzafc/

Менял событие scroll на mouseleave - все отлично работает, повторные клики отрабатывают. Но нужно именно с скролом.

В чем может быть проблема?

Answer 1

Добавил через else условие где картинка появляеться,

 $(function() { 
  $('.image').click(function() { 
var opacity = $(this).css("opacity"); 
if (opacity === "0") { 
  $('.image').animate({ 
    opacity: "1", 
  }, 2000); 
   
} else{ 
 $('.image').animate({ 
    opacity: "0", 
  }, 2000); 
} 
  }); 
  $(window).scroll(function() { 
 
var opacity = $('.image').css("opacity"); 
 
if (opacity === "0") { 
  $('.image').show(1000); 
  $('.image').animate({ 
    opacity: "1", 
  }, 1000); 
 
} 
  }); 
}); 
 
$(function() { 
  $(window).scroll(function() { 
 
var opacity = $('.image').css("opacity"); 
 
if (opacity === "0") { 
  $('.image').show(1000); 
  $('.image').animate({ 
    opacity: "1", 
  }, 1000); 
 
} 
  }); 
});

.wrap { 
  height: 1200px; 
} 
 
p { 
  width: 300px; 
  height: 300px; 
  background-color: lightblue; 
} 
 
.image { 
  widht: 300px; 
  height: 300px; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="wrap"> 
  <p> 
    <img src="http://jasonhumphrey.com/wp-content/uploads/2016/11/jsfiddle.png" class="image"> 
  </p> 
</div>

Answer 2

В общем всё просто. Я перемудрил. По клику делаем .fadeOut(1000), по скролу делаем .fadeIn(1000) на элементе