JQuery mouseenter() и mouseleave()

Question

Итак, у меня есть эта демо-навигация, на которой есть маленькая кнопка на стороне, и когда вы навешиваете кнопку, она перемещает меню в окно. хотя у меня есть зависание, но теперь, когда мышь уходит, он все еще открыт. как это исправить? Я довольно новыми для JQuery, кстати

вот HTML:

<div id="demoNav"> 
    <button class="open"></button> 
    <ul> 
     <li><a href="index.html">Home Pagina</a></li> 
     <li><a href="product.html">Product Pagina</a></li> 
     <li><a href="bestel.html">Bestel Pagina</a></li> 
    </ul> 
</div> 

И мой JQuery:

$("#demoNav").mouseenter(function(){ 
     $("#demoNav").animate({marginLeft:'0px'}, 500) 
}); 

Если вам нужно больше информации, просто скажите мне, я обеспечу больше кодов.

Answer 1

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

$("#demoNav").hover(

function() { 
    $(this).animate({ 
     marginLeft: '0px' 
    }, 500) 
}, 

function() { 
    $(this).animate({ 
     marginLeft: '50px' 
    }, 500) 
}); 

Answer 2

Добавить MouseLeave событие -

$('#demoNav').mouseleave(function(){ 
    $("#demoNav").animate({marginLeft:'50px'}, 500) 
}); 

Answer 3

Использование JQuery:

$("#demoNav").hover(function(){ 
    // do something when mouse hover   
},function(){ 
    //do some thing when mouseout 
}); 

Answer 4

Вы на самом деле не сказал это, чтобы снова скрыть.

То есть, я хотел бы предложить эту CSS альтернативу:

#demoNav { 
    transition:margin-left 0.5s ease; 
    -webkit-transition:margin-left 0.5s ease; 
} 
#demoNav:hover { 
    margin-left:0; 
} 

Answer 5

вы закодированный для mouseenter но забыл код для mouseleave event

добавить эти строки в JQuery

$("#demoNav").mouseleave(function(){ 
     $("#demoNav").animate({'marginLeft':'50px'}, 500) 
}); 

рабочий пример здесь:

http://jsfiddle.net/EP6wR/

, но я предлагаю использовать метод парения, который чище

syntax: $(selector).hover(handlerIn, handlerOut) 

Answer 6

может быть это решение работает

$('#demoNav .open').on("mouseenter", function(){ $(this).parent().animate({marginLeft:'0px'}, 500); }); 
$('#demoNav').on("mouseleave", function(){ $(this).animate({marginLeft:'50px'}, 500); }); 

активированипя панель на зависание кнопки, но когда вы покинете div, он снова начнет делать левый ход