Всплывающие окна на jQuery.

Удивительно оригинальная идея создания всплывающих подсказок или окон организованная на jQuery.

Как мы это делаем.

Чтобы создать эффекта всплывающих пузырьков, нам необходимо следующее:

  1. Разметка, на случай если JavaScript будет отключен. Было бы справедливо сказать, что всплывающее окно будет скрыто от CSS.
  2. Слиль всплывающего окна.
  3. jQuery к слою всплывающего окна на события mouseover (наведение мыши) и mouseout (отведение мыши).

Разметка HTML.

Для целей повторного использования, я завернуты мои целевые 'target' и 'popup' в слое div. Задача является элементом, который пользователь должен Наведите курсор мыши, чтобы показать всплывающее окно.


<div class="bubbleInfo">
<img class="trigger" src="http://mysite.com/path/to/image.png" />
<div class="popup">
<!-- тут наш текст-->
</div>
</div>

CSS

Нам необходим минимум. Конечно же вы можите сами задавать слили придумывать своё новое оформление как пузырька так и содержимого пузырька.

Мой рекомендуемый минимум для примера:


.bubbleInfo {
position: relative;
}

.popup {
position: absolute;
display: none; /* keeps the popup hidden if no JS available */
}

jQuery

Чтобы создать эффект, мы должны запустить следующую анимацию о всплывающих элемент:
Mouse Over

  1. При наведении мыши: сбросить позицию всплывающего окана (для того чтобы окно пошло вверх).
  2. Плавная анимация окна и исчезновение прозрачности, перемещение окна в отрицательные координаты -10px (вверх).
  3. Если курсор мыши наведен, но анимация всплывающего окна происходит то - игнорировать второй показ.
  4. Если курсор мыши наведен, а окно еще видно - игнорировать второй показ окна.

Mouse Out

  1. Создать таймер показа всплывающего окна.
  2. Таймер закончился скрыть окно, сбросить таймер.
  3. Установить прозрачность окна и задать начальные координаты она.
  4. Установить флаги в начальное положение.

Полный исходный код

Вот полный исходный код для эффекта, в том числе комментарии по всему коду, чтобы объяснить, что каждый блок делает.


$(function () {
$('.bubbleInfo').each(function () {
// options
var distance = 10;
var time = 250;
var hideDelay = 500;

var hideDelayTimer = null;

// tracker
var beingShown = false;
var shown = false;

var trigger = $('.trigger', this);
var popup = $('.popup', this).css('opacity', 0);

//наводим на элемент
$([trigger.get(0), popup.get(0)]).mouseover(function () {
// показывать элемент
if (hideDelayTimer) clearTimeout(hideDelayTimer);

// не вызывают анимации снова, если уже виден
if (beingShown || shown) {
return;
} else {
beingShown = true;

// сбросить позиции всплывающее окно
popup.css({
top: -100,
left: -33,
display: 'block' // Приносит всплывающих назад, чтобы посмотреть
})

// (we're using chaining on the popup) now animate it's opacity and position
.animate({
top: '-=' + distance + 'px',
opacity: 1
}, time, 'swing', function() {
// once the animation is complete, set the tracker variables
beingShown = false;
shown = true;
});
}
}).mouseout(function () {
// reset the timer if we get fired again - avoids double animations
if (hideDelayTimer) clearTimeout(hideDelayTimer);
hideDelayTimer = setTimeout(function () {
hideDelayTimer = null;
popup.animate({
top: '-=' + distance + 'px',
opacity: 0
}, time, 'swing', function () {
//отслеживаем переменные
shown = false;

popup.css('display', 'none');
});
}, hideDelay);
});
});
});

Готовый пример

Статья подавшая

Теги: ,

  1. Комментарие нет.

SetPageWidth