Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   "Всплытие пузырька" ? (https://javascript.ru/forum/jquery/59987-vsplytie-puzyrka.html)

iamopk 05.12.2015 16:39

"Всплытие пузырька" ?
 
Всем привет!
есть 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"},1 000,"swing");
}, function () {
$(".popupText").animate({left:"-500px",opacity:"0"},1000,"swing");
}
);

рони 05.12.2015 17:00

iamopk,
hover заменить на mouseenter и mouseleave перед анимате добавить .stop(true,true)

рони 05.12.2015 17:00

iamopk,
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:
[js]
... ваш код...
[/js]


О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.


Часовой пояс GMT +3, время: 07:24.