Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 05.12.2015, 16:39
Новичок на форуме
Отправить личное сообщение для iamopk Посмотреть профиль Найти все сообщения от iamopk
 
Регистрация: 05.12.2015
Сообщений: 1

"Всплытие пузырька" ?
Всем привет!
есть 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");
}
);
Ответить с цитированием
  #2 (permalink)  
Старый 05.12.2015, 17:00
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,126

iamopk,
hover заменить на mouseenter и mouseleave перед анимате добавить .stop(true,true)
Ответить с цитированием
  #3 (permalink)  
Старый 05.12.2015, 17:00
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,126

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

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


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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск