Like Popover

@kleoim · Регистрация: 12.03.2013

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

Здраствуйте помогите пожалуйста разобраться с проблемой, имеется кнопка с лайком, при наведении он должен показывать 4 лайка(как в ВК и в других соц сетях, неважно) но не резко и быстро появляться, а с задержкой в секунду, если мышка стоит наведённая на кнопке. И нужно убрать появившийся div если мышка ушла с этого div тоже с задержкой в секунду,

HTML5
1
2
3
4
<div class="likes_box">
    ....
</div>
<button>мне нравится</button>

буду очень благодарен за помощь

@BANO · 08.11.2016, 16:34

Ща сделаю.

@Balanaar · 08.11.2016, 16:35

Посмотрите в сторону css-свойства transition. С помощью него можно организовать простую анимацию с задержкой. Если не подойдет, то анимацию можно сделать с помощью jQuery.animate(). На нативном JS - не подскажу

@BANO · 08.11.2016, 16:38

Вот

CSS
1
2
3
#likes {
  display: none;
}

JavaScript
1
2
3
4
5
6
7
8
9
10
11
button.onmouseover = function(){
    setTimeout(showHide.bind(0, likes),1e3);
    likes.going2='show';
}
button.onmouseout = function(){
    setTimeout(showHide.bind(0, likes),1e3);
    likes.going2='hide';
}
function showHide(elem){
    elem.style.display = elem.going2 && elem.going2 == 'show' ? 'block' : 'none';
}

HTML5
1
2
<buttom id="button">лайки</buttom>
<div id="likes">asdfasdfasdf,asdfasdfasdf</div>

Добавлено через 1 минуту
Balanaar, в css не transition, а animation-delay, вроде.

@Balanaar · 08.11.2016, 16:40

<переход> = [ none | <transition-property> ] || <transition-duration> ||
<transition-timing-function> || <transition-delay>
Пример:

CSS
1
transition: top 1s ease-out 0.5s;

Здесь 0.5s - задержка перехода.

@kleoim · 08.11.2016, 16:42 **[ТС]**

Спасибо за помощь но хотелось бы чтобы при наведение на likes оно не исчезало, а исчезало если мышку убрать, а оно исчезает если мышка наведена

@BANO · 08.11.2016, 16:43

Balanaar, я этой задержкой не пользовался никогда)
А вы предлагаете display анимировать? По идее должно получиться.

Добавлено через 18 секунд
kleoim, просто likes внутрь кнопки зашейте.

@kleoim · 08.11.2016, 16:48 **[ТС]**

спасибо выручил ))

@BANO · 08.11.2016, 16:50

Balanaar, к сожалению не срабатывает с display
песочница

CSS
1
2
3
4
5
6
7
8
.like_button:hover .like_likes {
  display: block;
}
 
.like_likes {
  display: none;
  transition: display 1s linear 1s;
}

HTML5
1
2
3
<div class="like_button">лайки
  <div class="like_likes">asdfasdfasdf,asdfasdfasdf</div>
</div>

@Balanaar · 08.11.2016, 16:55

Опоздал немного )
https://jsfiddle.net/c03n3c8j/2/

HTML5
1
2
<button id="button">лайки</button>
<div id="likes">asdfasdfasdf,asdfasdfasdf</div>

CSS
1
2
3
4
#likes {
  opacity: 0;
  transition: opacity 0s linear 1s;
}

JavaScript
1
2
3
4
5
6
button.onmouseover = function(e){
    document.getElementById('likes').style.opacity = 1;
}
button.onmouseout = function(e){
    document.getElementById('likes').style.opacity = 0;
}

Добавлено через 1 минуту
BANO, а точно... есть же :hover

Добавлено через 2 минуты
https://jsfiddle.net/c03n3c8j/4/

HTML5
1
<div id="button">лайки<div id="likes">asdfasdfasdf,asdfasdfasdf</div></div>

CSS
1
2
3
4
5
6
7
#likes {
  opacity: 0;
  transition: opacity 0s linear 1s;
}
#button:hover #likes {
  opacity: 1;
}

@BANO · 08.11.2016, 17:37

Balanaar, opcity к сожалению не убирает элемент как в вк...

@kleoim · 08.11.2016, 23:22 **[ТС]**

Переделал скрипт , вот https://jsfiddle.net/fd5hs3fg/, но почему то если резко навести мышку и убрать резко то timeout срабатывает и блок с лайками появляется и резко исчезает, в том примере выше такого не было, что я не так сделал ? просто для одного блока с лайками было норм, сделал для нескольких блоков уже не так работает, помогите)) и можно ли как то упростить код ?

@BANO · 09.11.2016, 19:26

Ну, раз уж решили делать с jquery, тогда делать полностью на jquery!
песочница

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
.wrap {
  padding-top: 100px;
}
 
.like_btn {
  float: left;
  position: relative;
}
 
.likes_box {
  position: absolute;
  width: 230px;
  bottom: 40px;
  right: 0;
  left: 0px;
  bottom: 29px;
  background: red;
  z-index: 3;
  opacity: 0;
  visibility: hidden;
  padding-bottom: 14px;
  -webkit-transition: all .15s ease-in-out;
  transition: all .15s ease-in-out;
}
 
.likes_box.-show {
  visibility: visible;
  opacity: 1;
  bottom: 22px;
}

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$('.wrap').on({
  'mouseover': function(e) {
    var $el = $(e.target);
    setTimeout(showHide.bind(0, $el), 1e3);
    $el.data('going2', 'show');
    console.log($el)
  },
  'mouseout': function(e) {
    var $el = $(e.target);
    setTimeout(showHide.bind(0, $el), 1e3);
    $el.data('going2', 'hide');
  }
}, '.like_btn');
 
function showHide($el) {
  if ($el.data('going2') == 'show')
    $el.find('> .likes_box').addClass('-show');
  else
    $el.find('> .likes_box').removeClass('-show');
}

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="wrap">
  <button class="like_btn">
    лайк
    <div class="likes_box">
      лайки лайки лайки
    </div>
  </button>
 
 
  <button class="like_btn">
    лайк
    <div class="likes_box">
      лайки лайки лайки
    </div>
  </button>
</div>

@kleoim · 09.11.2016, 20:40 **[ТС]**

Спасибо за помощь))

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 01.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 31.01.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

Like Popover

Решение

Решение

@BANO Ренегат 1740 / 1085 / 386 Регистрация: 06.08.2014 Сообщений: 5,203 Записей в блоге: 1
	08.11.2016, 16:34
	Ща сделаю. 0

@Balanaar 2463 / 1769 / 625 Регистрация: 11.07.2016 Сообщений: 4,067
	08.11.2016, 16:35
	Посмотрите в сторону css-свойства transition. С помощью него можно организовать простую анимацию с задержкой. Если не подойдет, то анимацию можно сделать с помощью jQuery.animate(). На нативном JS - не подскажу 0

@kleoim 0 / 0 / 0 Регистрация: 12.03.2013 Сообщений: 130
	08.11.2016, 16:42 [ТС]
	Спасибо за помощь но хотелось бы чтобы при наведение на likes оно не исчезало, а исчезало если мышку убрать, а оно исчезает если мышка наведена 0

@BANO Ренегат 1740 / 1085 / 386 Регистрация: 06.08.2014 Сообщений: 5,203 Записей в блоге: 1
	08.11.2016, 16:43
	Сообщение было отмечено kleoim как решение Решение Balanaar, я этой задержкой не пользовался никогда) А вы предлагаете display анимировать? По идее должно получиться. Добавлено через 18 секунд kleoim, просто likes внутрь кнопки зашейте. 0

@kleoim 0 / 0 / 0 Регистрация: 12.03.2013 Сообщений: 130
	08.11.2016, 16:48 [ТС]
	спасибо выручил )) 0

@BANO Ренегат 1740 / 1085 / 386 Регистрация: 06.08.2014 Сообщений: 5,203 Записей в блоге: 1
	08.11.2016, 17:37
	Balanaar, opcity к сожалению не убирает элемент как в вк... 0

@kleoim 0 / 0 / 0 Регистрация: 12.03.2013 Сообщений: 130
	08.11.2016, 23:22 [ТС]
	Переделал скрипт , вот https://jsfiddle.net/fd5hs3fg/, но почему то если резко навести мышку и убрать резко то timeout срабатывает и блок с лайками появляется и резко исчезает, в том примере выше такого не было, что я не так сделал ? просто для одного блока с лайками было норм, сделал для нескольких блоков уже не так работает, помогите)) и можно ли как то упростить код ? 0

@kleoim 0 / 0 / 0 Регистрация: 12.03.2013 Сообщений: 130
	09.11.2016, 20:40 [ТС]
	Спасибо за помощь)) 0