Javascript: onmouseover не запускается более одного раза - PullRequest
Новая
       26

Javascript: onmouseover не запускается более одного раза

1 голос
/ 23 января 2012

имеет функцию, которая называется onmouseover, которая анимирует элемент, который был наведен вниз, а затем, как только мышь переместилась за пределы области, которую занимал элемент, оживляет элемент обратно. Функция работает нормально, но работает только один раз. Поэтому, если я наведу курсор мыши во второй раз, функция не сработает. Мне нужно обновить страницу, чтобы снова вызвать функцию. Любая помощь будет оценена.

HTML: 

<div class="frontDivcenter blueGradient shadow" id="front1" onmouseover="slideDown(this);">
        Hello
    </div>

Javascript: 

function slideDown(item) {
    $(item).animate({
        top: '-100%'
    }, 250, 'easeInOutCubic');
    $(document).mousemove(function (e) {
        if (e.pageX < $(item).offset().left || e.pageX > ($(item).offset().left + $(item).width()) || e.pageY < $(item).offset().top || e.pageY > ($(item).offset().top + $(item).height())) {
            $(item).animate({
                top: '-200%'
            }, 250, 'easeInOutCubic');
        }
    });
};

1 Ответ

0 голосов
/ 23 января 2012

Вы открепляете mouseover от элемента, а не mousemove от document

Попробуйте с: 

function slideDown(item) {
    $item = $(item);
    $item.animate({
        top: '-100%'
    }, 250, 'easeInOutCubic');

    $(document).mousemove(function (e) {
        var offset = $item.offset(),
            width = $item.width(),
            height= $item.height();

        if (e.pageX < offset.left || e.pageX > ( offset.left + width) || e.pageY < offset.top || e.pageY > (offset.top + height )) {

            $(document).unbind("mousemove");

            $item.animate({
                top: '-200%'
            }, 250, 'easeInOutCubic' );
        }
    });
}
...