наведите курсор на 2 секунды, не работает функция fadeIn / out sibling

#javascript #jquery #html #css

#javascript #jquery #HTML #css

Вопрос:

Мне удается заставить зависнуть на 2 секунды при исчезновении / выходе идентификатора или класса (который, очевидно, отлавливает все с одним и тем же классом), но я не могу заставить это работать с (этим).sibling(«имя_класса»)

Также функция fadeIn / Out или toggleFade отлично работает без инструкции if… У меня закончились идеи, как зависнуть более чем на 2 секунды, прежде чем сделать родственный элемент исчезающим

 var timeoutId;
$(".cell-inner").hover(function() {
  if (!timeoutId) {
    timeoutId = window.setTimeout(function() {
      timeoutId = null; // EDIT: added this line
      $(this).siblings(".tool-tip").fadeIn();
    }, 2000);
  }
});

function() {
  if (timeoutId) {
    window.clearTimeout(timeoutId);
    timeoutId = null;
  } else {
    $(this).siblings(".tool-tip").fadeOut();
  }
});

 .tool-tip {
  display: none;
}

.tool-tip:hover {
  cursor: pointer;
}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<div>
  <input type="text" class="cell-inner">
  <span class="tool-tip">The full text from the input field... Maecenas faucibus mollis interdum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</span>
</div>

1. В setTimeout ‘this’ больше не относится к вашему элементу (но к объекту window). вариант 1): за пределами setTimeout создайте локальную ссылку на ‘this’ , выполнив что-то вроде ‘var self = this’ , а затем используйте ‘self’ внутри функции ‘setTimeout’. Вариант 2), используйте setTimeout(() => {...}) . Т.е.: синтаксис со стрелкой, который сохраняет ссылку на «это» из внешней области. Осторожно: пока не все браузеры поддерживают функции со стрелками.

Ответ №1:

Во-первых, ваш фрагмент не работает, потому что вы поместили неназначенную анонимную функцию в конец блока. Я предполагаю, что это должно быть вторым аргументом для hover() вызова вместо этого.

Другая проблема с вашей логикой заключается в том, что setTimeout() функция-обработчик выполняется в области, отличной от mouseenter функции-обработчика, следовательно this , в вашем коде не ссылается на элемент, который вызвал событие.

Чтобы устранить проблему, создайте переменную в обработчике событий, которая содержит ссылку на элемент, которую вы затем можете использовать внутри таймаута. Обратите внимание, что вы также можете упростить вызовы setTimeout() и clearTimeout() следующим образом:

 var timeoutId;

$(".cell-inner").hover(function() {
  var $el = $(this);
  timeoutId = setTimeout(function() {
    $el.siblings(".tool-tip").fadeIn();
  }, 2000);
}, function() {
  clearTimeout(timeoutId);
  $(this).siblings(".tool-tip").fadeOut();
});

 .tool-tip {
  display: none;
}

.tool-tip:hover {
  cursor: pointer;
}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<div>
  <input type="text" class="cell-inner">
  <span class="tool-tip">The full text from the input field... Maecenas faucibus mollis interdum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</span>
</div>

Вы также должны отметить, что то, что вы пытаетесь сделать, возможно только в CSS. Такой подход является лучшей практикой, чем использование JS, где это возможно.

 .tool-tip {
  position: absolute;
  opacity: 0;
  transition: opacity 300ms;
  transition-delay: 2s;
}
.cell-inner:hover   .tool-tip {
  opacity: 1;
}


.tool-tip:hover {
  cursor: pointer;
}

 <div>
  <input type="text" class="cell-inner">
  <span class="tool-tip">The full text from the input field... Maecenas faucibus mollis interdum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</span>
</div>