Убедитесь, что jQuery fadeIn всегда на 100% видимости, таймер его расстраивает - PullRequest
Новая
       11

Убедитесь, что jQuery fadeIn всегда на 100% видимости, таймер его расстраивает

0 голосов
/ 28 ноября 2011

У меня есть некоторые элементы, которые используются в качестве подсказок. Они исчезают с помощью jQuery при наведении мыши / щелчке элементов с соответствующим управляющим классом. Любой элемент, который исчез, должен исчезнуть через 5 секунд.

Это довольно просто с jQuery, но если я наведу указатель мыши на один контроллер, а затем на другой в течение 5 секунд, таймер не будет сброшен, так что между отображением одного наконечника и секундного перерыва было 2 секунды, второй будет исчезать через 3 секунды.

Итак, поиск в Google и использование этого сайта привели к этому 

function showTips(triggerElement, tipText) { 
    $('#tipText').html(tipText);        
    clearTimeout($('#tipNote').stop().data('timer')); // clears timeOut to fade tooltip away
    $('#tipNote').fadeIn(function () { // fadeIn tooltip and sets a timeout function to hide it again
        $.data(this, 'timer', setTimeout(function () { $('#tipNote').fadeOut(); }, '5000'));
    });
};

Здесь есть две проблемы

1) если вы наведите курсор мыши на второй элемент контроллера, в то время как первая всплывающая подсказка не полностью исчезла (т.е. имеет непрозрачность, например, 50% в тот момент), следующая всплывающая подсказка, кажется, только постепенно исчезает до конечной непрозрачности что первый достиг (т. е. 50%), он почему-то сохраняет эту непрозрачность в памяти.

2) Я не совсем понимаю код, как он получен из приведенного здесь примера, я не уверен, что делает .data, или действительно, вызов $ .data в последней строке. Так как я не совсем понимаю это, я не уверен, как исправить проблему fadeIn.

==== edit ===

добавив в мой HTML

Контейнер всплывающей подсказки - это отдельный div, содержимое которого заполняется элементом controller, т.е.:

Элемент контроллера: 

<span id='marginAlertTotal' class='hoverTip' title='this is the tooltip content'></span>

У него есть класс hoverTip, поэтому он работает и при наведении

Мои настоящие подсказки: 

    <div class='tooltipContent borderRad5 tooltip-right tooltip' id='tipNote'>
        <span class="tiptext" id="tipText"></span>
        <div class='tooltip-pointer-down ui-widget-content'>
            <div class='tooltip-pointer-down-inner'></div>
        </div>
    </div>

Затем из моей вышеупомянутой функции Javascript (вызываемой щелчком мыши или при наведении курсора) содержимое #tipText заполняется атрибутом title контроллера.

1 Ответ

0 голосов
/ 28 ноября 2011

Это также можно сделать так: создайте div, содержащий 2 элемента управления, 1 для элемента hover и 1 с элементом div, который должен отображаться при наведении курсора.если вы все сделаете правильно, то следующий за ним элемент управления должен показывать следующий div.дать всем подсказкам один и тот же класс, но уникальные идентификаторы 

$('.myControls').mouseenter(function(){
   $('.yourTooltipClass').each(function(){
      $(this).fadeout(200); //or just $(this).hide(); to hide it immediatly
   });
$(this).next().fadein(time in ms).delay(5000).fadeout(time in ms);
});

Это проверит все ваши подсказки и скроет их все.Затем он покажет правильную подсказку и скроет ее через 5 секунд.Честно говоря, мне немного не хватает времени, поэтому это не лучшее решение, потому что оно также скрывает всплывающую подсказку через 5 секунд, если вы удерживаете мышь на элементе управления.

Но я думаю, что это должно сработать.

...