Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Мерцает показ-скрытие элемента... (https://javascript.ru/forum/dom-window/34800-mercaet-pokaz-skrytie-ehlementa.html)

Petja 19.01.2013 20:10

Мерцает показ-скрытие элемента...
 
<ul class="mainMenu shadow">
<li><a href="#">Грузчики</a></li>
<li><a href="#">Утилизация</a>
    <div class="popover bottom">
        <div class="arrow"></div>
        <div class="popover-content">
            Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
        </div>
    </div>
</li>
<li class="active"><a href="#">Упаковка</a></li><ul>


// Всплывающие подсказки popover
$('ul.mainMenu li').mouseover(function(){
    $(this).children('.popover').fadeIn()
        .delay(2000)
        .fadeOut();
        //.stop(true, true);
    return false;
});


Посмотреть можно тут: http://gruz.bz/

Код в файле mainmenu.js - после 30 строки.

Мерцает... Почему - никак не пойму... Ух...

Заранее спасибо!

Deff 19.01.2013 20:31

// Всплывающие подсказки popover
$('ul.mainMenu li').mouseenter(function(){
    $(this).find('.popover').stop().fadeIn()
        .delay(3000)
        .fadeOut();
        //.stop(true, true);
    return false;
});

Petja 19.01.2013 20:47

Спасибо большое!
А можно сделать так, чтобы при наведении появлялось, а при отведении курсора от li с задержкой скрывалось?

Deff 19.01.2013 20:49

Petja,
Имхо в Опере так и есть

Petja 19.01.2013 20:55

// Всплывающие подсказки popover
$('ul.mainMenu li')
    .mouseenter(function(){
        $(this).find('.popover').stop().fadeIn();
        return false;
    })
    .mouseleave(function(){
        $(this).find('.popover').stop().delay(500).fadeOut();
        return false;
    });


Вот так работает! Спасибо!

Petja 19.01.2013 21:08

Если резко навести курсер на A оторое в LI то не срабатывает.
А если размножить подсказку не только в этом LI но еще в другом - не работает на другом. Жуть, такая простая вещь и не работает вообще....

Deff 19.01.2013 21:33

Petja,
.mouseleave(function(){
08	        $(this).find('.popover').stop().delay(500).fadeOut();
09	        return false;
10	    });


Это не нужно при наличии
.delay(3000)
.fadeOut();

Deff 19.01.2013 21:40

Ну или так
// Всплывающие подсказки popover
var idTim;
$('ul.mainMenu li').mouseenter(function(){
    clearTimeout(idTim);
    $(this).find('.popover').stop().fadeIn('600');
    var aza=$(this);
    var idTim=setTimeout(function(){aza.find('.popover').stop().fadeOut('1700')},2000)
    return false;
});

Petja 20.01.2013 10:56

Спасибо! Оказалось, что эти поповеры уже предусмотрены для того, чтоб их привязывать. Только теперь вопрос как поймать событие - что появился до этого не существующий элемент. Чтобы просто всем другим элементам уменьшить z-index, а появившемуся увеличить. Т.к. перекрывают друг друга.

Petja 20.01.2013 12:14

Все, все проблемы решил! Спасибо еще раз!


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