Событие Hover / mouseenter запускает анимированный пользовательский интерфейс jQuery - PullRequest
Новая
       7

Событие Hover / mouseenter запускает анимированный пользовательский интерфейс jQuery

2 голосов
/ 24 мая 2011

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

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

Еще более странно то, что кажется, что событие mouseleave срабатывает сразу после события hover, независимо от того, покинула ли мышь элемент списка. Это происходит независимо от того, использовал ли я hover или mouseenter.

Вот что у меня есть: HTML: 

<nav>
    <ul>
        <a href="index.html"><li>Home</li></a>
        <a href="services.html"><li>Services</li></a>
        <a href="portfolio.html"><li>Portfolio</li></a>
        <a href="contact.php"><li>Contact</li></a>
        <a href="about.html"><li>About</li></a>
    </ul>
</nav>

JQuery: 

$("nav li").mouseenter(function(){
        $(this).animate({bottom:"-50px"},"fast", function(){$(this).css('background','orange');$(this).css('color','#fff');});
        $(this).animate({bottom:"-0px"},"fast");
    }).mouseleave(function(){
        $(this).animate({bottom:"-50px"},"fast", function(){$(this).css('background','white');$(this).css('color','#333');});
        $(this).animate({bottom:"-0px"},"fast");
    });

CSS: 

nav{
float:right;
margin-top:91px;
}
nav ul, nav ul li{
display:inline;
}
nav li{
margin-left:10px;
position:relative;
padding:5px 20px;
color:#A29874;
background-color:#fff;
border-top-right-radius:5px;
border-top-left-radius:5px;
 }

nav a{
position:relative;
text-decoration:none;
 }

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

Я проверил сеть и попробовал такие вещи, как открепление события mouseenter, используя условный запуск анимации только после того, как событие mouseleave сработало безрезультатно.

Буду очень признателен за любые предложения, желательно, прежде чем я буду лысым. Спасибо!

Ответы [ 2 ]

2 голосов
/ 24 мая 2011

Причина вашей проблемы в том, что вы перемещаете элемент, чтобы он больше не находился под мышью. Поэтому очевидно, что mouseleave() срабатывает. Вы можете избежать этого, запустив анимацию при наведении курсора на a, но прицельтесь на анимацию на li. Смотри: http://jsfiddle.net/aN4g4/50/

Вот ваш новый JS: 

$("nav a").mouseenter(function(){
    var $li = $(this).find('li');
    $li.stop(true,true).animate({bottom:"-50px"},"fast",
        function(){
            $li.css({'background':'orange','color':'#fff'});
        });
    $li.stop(true,true).animate({bottom:"-0px"},"fast");
}).mouseleave(function(){
    var $li = $(this).find('li');
    $li.stop(true,true).animate({bottom:"-50px"},"fast",
        function(){
            $li.css({'background':'white','color':'#333'});
        });
    $li.animate({bottom:"-0px"},"fast");
});

Возможно, вы заметили, что функция обратного вызова, которая срабатывает после завершения анимации, была немного оптимизирована. Вы можете передать несколько свойств CSS следующим образом: .css({'prop1':'val1','prop2':val2'}) Кроме того, я оптимизировал код, чтобы вы не генерировали много объектов jQuery, потому что это медленно. (обратите внимание на строку var $li.)

0 голосов
/ 24 мая 2011

попробуйте установить ваш li как position: relative;

я просто "вставлю" ваш код и установите относительно вашего <li>

результат был немного забавным.

Смотрите здесь: http://jsfiddle.net/aN4g4/47/

...