hide() не работает сразу после шоу()

Question

В настоящее время я работаю над меню с раскрывающимся меню. Выпадающее меню отображается с помощью JQuery UI «s "Show ('слайд', ...)" функцию MouseEnter и скользит назад, используя его«скрыть '(слайд', ...) функции.

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

Я попытался с помощью .stop (правда, правда) и .dequeue(), но не Успех У меня возникло чувство, что проблема заключается в вызове $ (this) .children(). Обратите внимание, что мое использование классов и детей является преднамеренным, поскольку в этом случае оно необязательно, но оно необходимо в моем проекте. С стрелкой $ (< #myElement>) звоните, кажется, работает.

Я благодарен за конструктивную обратную связь по этому вопросу. Я провел весь день googleing/trial и ошибки/устранение неполадок.

$(".element").mouseenter(function(){ 
 
     $(this).children(".toggleme").show("slide", {direction: "left"}, 100); 
 
    }).mouseleave(function(){ 
 
     $(this).children(".toggleme").hide("slide", {direction: "left"}, 100); 
 
    }); 
 

<div class="element"> 
 
    <span> TEST </span> 
 
    <div class="toggleme" style="width:100px; height:100px; background-color: red; display: none;"> 
 
     I appear and vanish! 
 
    </div> 
 
</div> 
 

 
<script src="http://code.jquery.com/jquery-latest.js"></script> 
 
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>

Answer 1

Вы бы лучше делать что-то вроде этого:

// handle the mouse entering 
jQuery(document).on('mouseover', ".element", function() { 
    $(this).children(".toggleme").show("slide", {direction: "left"}, 100); 
}); 
// handle the mouse leaving 
jQuery(document).on('mouseout', ".element", function() { 
    $(this).children(".toggleme").hide("slide", {direction: "left"}, 100); 
}); 

Вместо цепочки как вы сделали.

---

Ссылки

• jQuery.mouseover()
• jQuery.mouseout()

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

Answer 2

Предполагая, что проблема заключается в том, что красный цвет не скрывается на руке, оберните внутри $ (document) .ready();

$(document).ready(function() { 
     $(".element").mouseenter(function(){ 
     $(this).children(".toggleme").show("slide", {direction: "left"}, 100); 
     }).mouseleave(function(){ 
     $(this).children(".toggleme").hide("slide", {direction: "left"}, 100); 
     }); 
    }); 

Кроме того, необходимо импортировать JQuery UI

http://plnkr.co/edit/qC1dWlTG7pu1QR4fW8h0?p=preview

Answer 3

Обычно я рекомендовал бы метод slideToggle здесь. Но так как вы хотите анимацию слева, кажется, что animate подходит для счета.

$(".element").mouseenter(function(){ 
    $(this).children(".toggleme").animate({width: 'toggle'}); 
    }).mouseleave(function(){ 
     $(this).children(".toggleme").animate({width: 'toggle'}); 
}); 

Адрес Fiddle.

Answer 4

Это то, что вы пытаетесь достичь?

$(".element").children("span").mouseenter(function(){ 
 
     $(this).siblings(".toggleme").show("slide", {direction: "left"}, 100); 
 
    }); 
 
    $(".element").children("div").mouseleave(function(){ 
 
     $(this).hide("slide", {direction: "left"}, 100); 
 
    }); 
 

<div class="element"> 
 
    <span> TEST </span> 
 
    <div class="toggleme" style="width:100px; height:100px; background-color: red; display: none;"> 
 
     I appear and vanish! 
 
    </div> 
 
</div> 
 

 
<script src="http://code.jquery.com/jquery-latest.js"></script> 
 
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>

Answer 5

$(".element").mouseenter(function(){ 
 
     $(this).children(".toggleme").show("slide", {direction: "left"}, 100); 
 
    }).mouseleave(function(){ 
 
     $(this).children(".toggleme").hide("slide", {direction: "left"}, 100); 
 
    });

.element {display: inline-block;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="element"> 
 
    <span> TEST </span> 
 
    <div class="toggleme" style="width:100px; height:100px; background-color: red; display: none;"> 
 
     I appear and vanish! 
 
    </div> 
 
</div> 
 

 
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>

Это работает, как ожидалось, поскольку .element представляет собой блок-элемент, так что она занимает 100% ширины страницы. Даже если вы думаете, вы больше не висите элемент, вы все еще на нем своим курсором. Решение состоит в том, чтобы установить .element на display: inline-block;.