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

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

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

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

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

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

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

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!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
1
2
3
4
5
6
7
8
9
10
11
12
13
$(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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
* {
  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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
$(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
1
2
3
4
5
<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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.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
1
2
3
4
5
6
$('.zoom').on('mouseenter', function(){
    $(this).addClass('is_zoom');
});
$('.zoom').on('mouseleave', function(){
    $(this).removeClass('is_zoom');
});

@cmath · 11.09.2018, 10:33

******73, хорошое решение

@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

Новые блоги и статьи Все статьи Все блоги /
Functional First Web Framework Suave DevAlt 30.03.2026 Sauve. IO Апнулись до NET10. Из зависимостей один пакет, работает одинаково хорошо как в режиме проекта так и в интерактивном режиме. из сложностей - чисто функциональный подход. Решил. . .	Автоматическое создание документа при проведении другого документа Maks 29.03.2026 Реализация из решения ниже выполнена на нетиповых документах, разработанных в конфигурации КА2. Есть нетиповой документ "ЗаявкаНаРемонтСпецтехники" и нетиповой документ "ПланированиеСпецтехники". В. . .	Настройка движения справочника по регистру сведений Maks 29.03.2026 Решение ниже реализовано на примере нетипового справочника "ТарифыМобильнойСвязи" разработанного в конфигурации КА2, с целью учета корпоративной мобильной связи в коммерческом предприятии. . . .	Автозаполнение реквизита при выборе элемента справочника Maks 27.03.2026 Программный код из решения ниже на примере нетипового документа "ЗаявкаНаРемонтСпецтехники" разработанного в конфигурации КА2. При выборе "Спецтехники" (Тип Справочник. Спецтехника), заполняется. . .
Сумматор с применением элементов трёх состояний. Hrethgir 26.03.2026 Тут. https:/ / fips. ru/ EGD/ ab3c85c8-836d-4866-871b-c2f0c5d77fbc Первый документ красиво выглядит, но без схемы. Это конечно не даёт никаких плюсов автору, но тем не менее. . . всё может быть. . .	Автозаполнение реквизитов при создании документа Maks 26.03.2026 Программный код из решения ниже размещается в модуле объекта документа, в процедуре "ПриСозданииНаСервере". Алгоритм проверки заполнения реализован для исключения перезаписи значения реквизита,. . .	Команды формы и диалоговое окно Maks 26.03.2026 1. Команда формы "ЗаполнитьЗапчасти". Программный код из решения ниже на примере нетипового документа "ЗаявкаНаРемонтСпецтехники" разработанного в конфигурации КА2. В качестве источника данных. . .	Кому нужен AOT? DevAlt 26.03.2026 Решил сделать простой ланчер Написал заготовку: dotnet new console --aot -o UrlHandler var items = args. Split(":"); var tag = items; var id = items; var executable = args;. . .

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

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

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

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

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

Решение