Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Помогите разобраться с mouseenter / mouseleave и setTimeout (https://javascript.ru/forum/jquery/63330-pomogite-razobratsya-s-mouseenter-mouseleave-i-settimeout.html)

alecto 29.06.2016 15:21

простите, не понял, это как?
если о примере - он здесь, только без таймера - центральный блок, сетка
http://astravel.com.ua/
код я тоже весь привел, но посути, мне нужно изолировать от случайно проводки все, что находится внутри функции
$('.view-tury.view-display-id-page_1 .views-col').mousemove(function(e) { ... }

единственное - выношу за таймер переменную
var tempThis = $(this);

иначе без нее не определяются данные внутри функции для элемента, над которым находится курсор.

рони 29.06.2016 15:38

alecto,
а что за мусор в строке 38? пост 9

alecto 29.06.2016 15:41

точно, это условия, чтобы скрипт работал только на главной странице
if (location.href == 'http://astravel.com.ua/') { 
}

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

рони 29.06.2016 16:12

alecto,
вариант
$("#main").append('<div id="follower"></div>');
    $("#follower").hide();
    var TimerInterval;
    $(".view-tury.view-display-id-page_1 .views-col").mousemove(function(e) {
        var tempLeft = e.pageX + 325;
        if ($(window).width() > tempLeft) $("#follower").offset({
            left: e.pageX + 20,
            top: e.pageY + 30
        });
        else $("#follower").offset({
            left: e.pageX - 300,
            top: e.pageY + 30
        })
    }).mouseenter(function() {
        clearTimeout(TimerInterval);
        $("#follower").html($(this).html()).hide();
        TimerInterval = setTimeout(function() {
            $("#follower").show()
        }, 1500)
    }).mouseleave(function() {
        $("#follower").html("").hide();
        clearTimeout(TimerInterval)
    })

рони 29.06.2016 16:25

косметические дополнения к варианту выше
$("#main").append('<div id="follower"></div>');
    $("#follower").hide();
    var TimerInterval;
    $(".view-tury.view-display-id-page_1 .views-col").mousemove(function(e) {
        var tempLeft = e.pageX + 325;
        if ($(window).width() > tempLeft) $("#follower").offset({
            left: e.pageX + 20,
            top: e.pageY + 30
        });
        else $("#follower").offset({
            left: e.pageX - 300,
            top: e.pageY + 30
        })
    }).mouseenter(function() {
        clearTimeout(TimerInterval);
        var tempThis = $(this);
        $("#follower").html(tempThis.html()).hide();
        TimerInterval = setTimeout(function() {
            $("#follower").stop().show();
            tempThis.trigger("mousemove");
        }, 1500)
    }).mouseleave(function() {
        $("#follower").html("").stop().hide();
        clearTimeout(TimerInterval)
    })

alecto 29.06.2016 16:29

спасибо!
вроде заработало, но вот беда...
блок появляется черти где справа внизу.
т.е. на mouseenter появляется горизонтальный скрол, а блока нигде не видно.
только если продолжить движение мышкой - скрол исчезает и появляется блок, где ему и положено быть.
я не сразу понял, где находится блок + неэстетичное прыгание прокруток при каждом наезде на ячейку сетки.

так же пробовал код
$("#follower").offset({
            left: e.pageX - 300,
            top: e.pageY + 30
        })

добавить в mouseenter - не помогло.

пробовал определить начальное положение блока через цсс и напрямую прописывая ему позицию через стайл в скрипте - не помогает, он появляется там, где ему хочется.

мне кажется, вариант с mouseenter не удастся заставить работать, как нужно.

alecto 29.06.2016 16:38

и еще вопрос:
у меня на странице изначально нет плавающего блока, он формируется при наведении на элемент.
так же для него и его контента есть стили.
на mousemove по тригеру создается сам див и происходит его заполнение, на mouseleave - блок полностью удаляется.
я решил, что если содержимое блока полностью генерируется по событию мышки, то смысл его прятать/показывать, поэтому удалил-создал.
или я заблуждаюсь в этом вопросе?

рони 29.06.2016 16:45

alecto,
а так ?
$("#main").append('<div id="follower"></div>');
    $("#follower").hide();
    $(".view-tury.view-display-id-page_1 .views-col").off().mousemove(function(e) {
        var tempLeft = e.pageX + 325;
        if ($(window).width() > tempLeft) $("#follower").offset({
            left: e.pageX + 20,
            top: e.pageY + 30
        });
        else $("#follower").offset({
            left: e.pageX - 300,
            top: e.pageY + 30
        })
    }).mouseenter(function() {
        $("#follower").stop().hide().html($(this).html()).delay(1500).show();
    }).mouseleave(function() {
        $("#follower").html("").stop().hide();
        })

рони 29.06.2016 16:46

Цитата:

Сообщение от alecto
я заблуждаюсь в этом вопросе?

как вам удобнее -- но проще создать 1 раз

alecto 29.06.2016 16:49

#18 срабатывает сразу, как и первоначальном варианте.


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