Как я могу сделать этот эффект при наведении курсора?

0

я уже сделал обычные кнопки, но мне нужно сделать кнопку поиска в левом меню на этом веб-сайте http://www.coolwebmasters.com/

когда я наводил на #profilename, он исчезает

<div id="container">
<div class="prof"><a href="index.php"><img src="imgs/profile.png" alt="Messages"/>

</a></div>
</div>
<div  id="profilename">Name</div>



$(".prof").hover(function(){
$('#profilename').show('slide', {direction: 'left'}, 280); 
}, function() {
    $('#profilename').hide('slide', {direction: 'left'}, 280); 
});
Теги:

1 ответ

0
Лучший ответ

Это связано с тем, что когда вы перемещаете мышь из элемента .prof, #profilename скрывается.

Пытаться

jQuery(function ($) {
    $('.prof').hover(function () {
        var $target = $('#profilename');
        clearTimeout($target.data('hoverTimer'));
        $target.stop(true, true).show('slide', {direction: 'left'}, 280);
    }, function () {
        var $target = $('#profilename');
        var timer = setTimeout(function () {
            $target.stop(true, true).hide('slide', {direction: 'left'}, 280);
        }, 200);
        $target.data('hoverTimer', timer);
    });

    $('#profilename').hover(function () {
        clearTimeout($(this).data('hoverTimer'));
    }, function () {
        $(this).stop(true, true).hide('slide', {direction: 'left'}, 280);
    });
});

Демо: скрипка

В приведенном выше решении мы даем пользователю .prof #profilename переходить от .prof к элементу #profilename, если это так, мы .prof #profilename, поэтому предотвращается скрытие элемента.

  • 0
    это не может быть просто ванильным jquery. Я пытался понять, как скользить влево и вправо в течение нескольких дней. это JQuery-UI?
  • 1
    @ 13ruce1337 да должен присутствовать jQuery UI
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню