1

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

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

https://jsfiddle.net/yhzqzafc/

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

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

1
  • Решено. По клику делаем .fadeOut(1000), по скролу делаем .fadeIn(1000) на элементе 14 дек 2017 в 15:59

2 ответа 2

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>

1
  • Спасибо, так работает. Но мне нужно после того как картинка станет прозрачной, дать ей display: none; Потому, что у меня под ней гугл карты, если не задать ей этот параметр, я не смогу скролить карту. Поэтому я и делал по клику opacity + hide. Ну и по скролу наоборот. И если делать моим способом, то второй раз событие по клику не проходит. 14 дек 2017 в 15:51
0

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

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.