Форум программистов, компьютерный форум, киберфорум
jQuery
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.73/11: Рейтинг темы: голосов - 11, средняя оценка - 4.73
23 / 7 / 0
Регистрация: 24.04.2018
Сообщений: 411

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

10.09.2018, 19:37. Показов 2121. Ответов 6
Метки нет (Все метки)

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

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

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

-------------------------------------------------------------------------------------
Ссылка на результат с багом: 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;
}
0
Лучшие ответы (1)
IT_Exp
Эксперт
34794 / 4073 / 2104
Регистрация: 17.06.2006
Сообщений: 32,602
Блог
10.09.2018, 19:37
Ответы с готовыми решениями:

Как сделать поворот изображения при наведении курсора мыши
Всем Привет! Подскажите как сделать поворот изображения при наведении курсора мыши? Вот как здесь:...

Подсказка при наведении курсора мыши
Смотрю видеоурок, и там переписал вот такой код. Должно при наведении на текст ,как там говорится повится должна подсказка. Вот...

Смена фона при наведении курсора мыши на ячейку таблицы
Создать функцию, которая будет изменять фон слоя в соответствии с фоном ячейки при наведении курсора мыши на ячейку таблицы. В качестве...

6
 Аватар для cmath
2525 / 1751 / 152
Регистрация: 11.08.2012
Сообщений: 3,349
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);
  });
});
0
 Аватар для Kraken73
105 / 93 / 50
Регистрация: 17.09.2015
Сообщений: 612
11.09.2018, 08:40
Лучший ответ Сообщение было отмечено cmath как решение

Решение

а не будет логичней что-то типо этого?
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');
});
1
 Аватар для cmath
2525 / 1751 / 152
Регистрация: 11.08.2012
Сообщений: 3,349
11.09.2018, 10:33
******73, хорошое решение
0
23 / 7 / 0
Регистрация: 24.04.2018
Сообщений: 411
11.09.2018, 15:48  [ТС]
Помогло спс)))
Я раньше пробовал на чистом CSS через "hover scale" но картинка при увеличении теряла свое качество.
Поэтому я решил сделать основную функцию через jquery.
0
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
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
BasicMan
Эксперт
29316 / 5623 / 2384
Регистрация: 17.02.2009
Сообщений: 30,364
Блог
15.09.2018, 17:05
Помогаю со студенческими работами здесь

При наведении курсора мыши на картинку ее изображение должно меняться на другое
1. По нажатию на кнопку button_1 пользователь получает одно из трех сообщений: &quot;Кликни-ка еще разик&quot;, &quot;Эта кнопка — самая...

Как сделать так, чтобы при наведении курсора мыши на ссылку сразу же появилось примечание?
Как сделать такой-же скрипт: при наведении курсора мыши на ссылку сразу же появилось примечание, но только в этом же окне. Потому что в...

В задании при наведении курсора мыши на названии животного, в ячейке таблицы появляется рисунок этого животног
В задании при наведении курсора мыши на названии животного, в ячейке таблицы появляется рисунок этого животного. При уведении курсора в...

Фокус при наведении курсора мыши
Всем привет! Как реализовать авто-фокус на компонент на который навели курсор? К примеру на форме TListBox и TTrackBar, нужно чтоб при...

Картинка на картинке при наведении курсора мыши
Всем привет. Я хочу сделать с помощью css так что бы при наведении курсора мыши на картинку, на этой же картинке появлялась еще одна...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
7
Ответ Создать тему
Новые блоги и статьи
http://iceja.net/ сервер решения полиномов
iceja 18.01.2026
Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .
Первый деплой
lagorue 16.01.2026
Не спеша развернул своё 1ое приложение в kubernetes. А дальше мне интересно создать 1фронтэнд приложения и 2 бэкэнд приложения развернуть 2 деплоя в кубере получится 2 сервиса и что-бы они. . .
Расчёт переходных процессов в цепи постоянного тока
igorrr37 16.01.2026
/ * Дана цепь постоянного тока с R, L, C, k(ключ), U, E, J. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа, решает её и находит: токи, напряжения и их 1 и 2 производные при t = 0;. . .
Восстановить юзерскрипты Greasemonkey из бэкапа браузера
damix 15.01.2026
Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .
Изучаю kubernetes
lagorue 13.01.2026
А пригодятся-ли мне знания kubernetes в России?
Сукцессия микоризы: основная теория в виде двух уравнений.
anaschu 11.01.2026
https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/
WordPad для Windows 11
Jel 10.01.2026
WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .
Classic Notepad for Windows 11
Jel 10.01.2026
Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru