1

При наведении на блок должна выполняться анимация с задержкой. Если делать без таймера, то все работает. С таймером не работает, хотя в консоли выводится "777".

    $(".js-video_item").hover(
        function() {
            $(this).find(".js-preview").animate({opacity: 1}, 200);
            setTimeout(function(){
                $(this).find(".js-preview").animate({opacity: 1}, 200);
                console.log("777");
            }, 500);
        },
        function() {

        }
    );

1 ответ 1

2

Не работает, потому что функция определяет this во время вызова - в зависимсти от объекта, в контексте которого была вызвана. Если внутри setTimeout вызвать console.log(this) - выведет глобальный объект window.

Нужно или снаружи сохранить значение в переменной - а внутри функции уже использовать её, или использовать стрелочную функцию, которая не влияет на this.

$(".js-video_item").hover(

  function() {
    var $t = $(this);
    setTimeout(function(){
      $t.find(".js-preview").animate({ opacity: 1 }, 200);
      console.log("111");
    }, 500);
  },
  
  function() {
    setTimeout( () => {
      $(this).find(".js-preview").animate({ opacity: 0 }, 200); 
      console.log("000");
    }, 500);
  }
  
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="js-video_item">>>> js-video_item (hover)
  <div class="js-preview" style="opacity: 0;">>>> js-preview</div>
</div>

https://learn.javascript.ru/ (пункт 4.4 — this).

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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