@noname_opk

"Всплытие пузырька" в jquery?

Всем привет!
есть html элементик при наведении на спан НАД ним выкатывается при помощи jQuery animate дивчик, НО есть проблема..как я понимаю во "всплытие пузырька". в момент когда мы навели мышь на спан див начинает выкатываться и все хорошо, но если в момент его выкатывания мы резко перебросим мышь на сам див, а потом можно уже убрать курсор мыши хоть куда, див начинает САМ автоматически вкатываться и выкатываться пару раз без остановки. Магия? Не думаю.. но своих мозгов понять не хватило, подскажите как реализовать данную задумку.
Нужно чтобы при наведении на див он не реагировал как будто это навели мышь на спан, я понимаю что можно было бы его вытащить в хтмле из спана, но тогда нереально настроить так чтобы див выкатывался прямо над спаном на всех возможных разрешениях экранов.. короче у меня или подход неверен или нужно что-то в jQuery поправить..
Заранее низкий поклон!

/***** HTML ******/

<span class="question">
	<div class="popupText">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi, in?</div>
</span>


/***** CSS ******/

.question{
	position:relative;
}

.popupText{
	position: absolute;
	opacity:0;
	width: 300px;
    bottom: 35px;
    padding: 10px;
    font-size: 25px;
	line-height:1;
	left:-500px;
}


/***** iQuery ******/

$('span.question').hover(
	function () {
		$(".popupText").animate({left:"0px",opacity:"1"},1000,"swing");
	}, function () {
		$(".popupText").animate({left:"-500px",opacity:"0"},1000,"swing");
	}
);
  • Вопрос задан
  • 224 просмотра
Пригласить эксперта
Ответы на вопрос 1
xPomaHx
@xPomaHx
1vs9
https://codepen.io/anon/pen/MKWXVx
ваш код не работает, но скорее всего поможет функция stop()
$(".popupText").stop().animate({left:"0px",opacity:"1"},1000,"swing");

как то так
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы