Установка задержки события при наведении курсора мыши

@Kerduk · Регистрация: 24.04.2018

Author24 — интернет-сервис помощи студентам

Есть данный скрипт, который плавно увеличивает картинку при наведении курсора мыши.
Хотелось бы установить задержку при наведении курсора мыши на селектор.
Но как это сделать правильно я не знаю.
Так как начал изучение языка недавно.

Без задержки имеется баг - если быстро переключать курсор мыши между картинками то они увеличиваются моментально и не плавно.

Я точно не знаю как починить данный баг.
Но думаю, что задержка должна все исправить.

-------------------------------------------------------------------------------------
Ссылка на результат с багом: https://codepen.io/anon/pen/RYQoqG
-------------------------------------------------------------------------------------

HTML5

<!DOCTYPE html>
<html>
 
<head>
  <meta charset="utf-8" />
  <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
 
<body>
  <div class="zoom-block">
    <div class="zoom">
      <img src="https://cdn1.savepice.ru/uploads/2018/9/10/14bc423e0c5381ee5f3da42fc50742e1-full.jpg" alt="" />
    </div>
  </div>
  <div class="zoom-block2">
    <div class="zoom">
      <img src="https://cdn1.savepice.ru/uploads/2018/9/10/4c57ae5bbc2a37a59cdc5acd2aab9810-full.jpg" alt="" />
    </div>
  </div>
  <div class="zoom-block3">
    <div class="zoom">
      <img src="https://cdn1.savepice.ru/uploads/2018/9/10/09ba064cef0718d1e75913fe7b133db2-full.jpg" alt="" />
    </div>
  </div>
</body>
 
</html>

Javascript

$(document).ready(function(){
 
$('.zoom').mouseenter(function(){
$(this).children('img').stop(true,true)
.animate({width:"495px",height:"275px",left:"-10px",top:"0"}, 500);
});
        
$('.zoom').mouseleave(function(){
$(this).children('img').stop(true,true)
.animate({width:"450px",height:"250px",left:"0",top:"0"}, 500);
});
 
});

CSS

* {
  margin: 0;
  padding: 0;
  border: 0;
}
 
body {
  height: 100%;
  width: 100%;
}
 
.zoom-block {
  margin-top: 5%;
  margin-left: 5%;
}
 
.zoom-block2 {
  margin-top: 2%;
  margin-left: 5%;
}
 
.zoom-block3 {
  margin-top: 2%;
  margin-left: 5%;
}
 
div.zoom {
  width: 450px;
  height: 250px;
  position: relative;
  margin: 0;
  left: 0;
  right: 0;
  border: 2px solid red;
}
 
div.zoom img {
  width: 450px;
  height: 250px;
  position: relative;
  cursor: pointer;
  left: 0;
  top: 0;
}

@cmath · 11.09.2018, 02:35

Такое поведение устроит?

Javascript

$(document).ready(function() {
  $('.zoom').mouseenter(function() {
    $(this).children('img')
      .stop(true, true)
      .animate({
        width: "495px",
        height: "275px",
        left: "-10px",
        top: 0,
      }, 300);
  });
 
  $('.zoom').mouseleave(function() {
    $(this).children('img')
      .stop(true, false)
      .animate({
        width: "450px",
        height: "250px",
        left: 0,
        top: 0,
      }, 300);
  });
});

@Kraken73 · 11.09.2018, 08:40

а не будет логичней что-то типо этого?

HTML5

<div class="wrapper">
  <div class="zoom" style="background-image: url(https://cdn1.savepice.ru/uploads/2018/9/10/4c57ae5bbc2a37a59cdc5acd2aab9810-full.jpg);">  </div>
   <div class="zoom" style="background-image: url(https://cdn1.savepice.ru/uploads/2018/9/10/4c57ae5bbc2a37a59cdc5acd2aab9810-full.jpg);">  </div>
    <div class="zoom" style="background-image: url(https://cdn1.savepice.ru/uploads/2018/9/10/4c57ae5bbc2a37a59cdc5acd2aab9810-full.jpg);">  </div>
</div>

CSS

.wrapper {
  display: flex;
  flex-wrap: wrap;
  width: 450px;
}
.zoom {
  flex: 0 0 100%;
  height: 250px;
  background-size: cover;
  background-position: center;
  transition: all 0.5s ease-in-out;
  transform-origin: 50%;
  border: 2px solid red;
  margin-bottom: 30px;
}
 
.zoom.is_zoom {
  transform: scale(1.2);
}
 
/*.zoom:hover {
  transform: scale(1.2);
}*/ /* тоже самое увеличение только на CSS */

Javascript

$('.zoom').on('mouseenter', function(){
    $(this).addClass('is_zoom');
});
$('.zoom').on('mouseleave', function(){
    $(this).removeClass('is_zoom');
});

@cmath · 11.09.2018, 10:33

Kraken73, хорошое решение

@Kerduk · 11.09.2018, 15:48 **[ТС]**

Помогло спс)))
Я раньше пробовал на чистом CSS через "hover scale" но картинка при увеличении теряла свое качество.
Поэтому я решил сделать основную функцию через jquery.

@Kerduk · 14.09.2018, 14:32 **[ТС]**

А что дает свойство "transform-origin: 50%" и что значит 50%???

@Kraken73 · 15.09.2018, 17:05

Kerduk,
точка, относительно которой будет происходить трансформация, в примере это середина и по X и по Y

@cmath 2525 / 1751 / 152 Регистрация: 11.08.2012 Сообщений: 3,349
	11.09.2018, 10:33	4
	Kraken73, хорошое решение 0

@Kerduk -106 / 7 / 0 Регистрация: 24.04.2018 Сообщений: 408
	11.09.2018, 15:48 [ТС]	5
	Помогло спс))) Я раньше пробовал на чистом CSS через "hover scale" но картинка при увеличении теряла свое качество. Поэтому я решил сделать основную функцию через jquery. 0

@Kerduk -106 / 7 / 0 Регистрация: 24.04.2018 Сообщений: 408
	14.09.2018, 14:32 [ТС]	6
	А что дает свойство "transform-origin: 50%" и что значит 50%??? 0

@Kraken73 105 / 93 / 50 Регистрация: 17.09.2015 Сообщений: 611
	15.09.2018, 17:05	7
	Kerduk, точка, относительно которой будет происходить трансформация, в примере это середина и по X и по Y 0

Установка задержки события при наведении курсора мыши

Решение