jQuery menu slide hover glitch

Question

Я создал меню с < divs> и использую мышь для мыши, чтобы добавить и удалить язык (например, описание каждого значка меню). Проблема, с которой я сталкиваюсь, - это когда я нависаю над языком, он выполняет (правильно) функцию mouseout для кнопки и удаляет язык.

Как я могу предотвратить это? Спасибо!

http://jsfiddle.net/QZ75D/

$('#wrapper').on('mouseover', '.1, .2, .3, .4, .5', function(){ 
    var tongue = '<div class = "tongue">'+$(this).attr('value')+'</div>'; 
    $(tongue).appendTo($(this)).animate({width:"toggle"}); 
}); 
$('#wrapper').on('mouseout', '.1, .2, .3, .4, .5', function(){ 
    var that = $(this); 
    $('.tongue').animate({width:"toggle"},function(){ 
     that.children('.tongue').remove(); 
    }); 
}); 

Bonus: Текст также зависит от ширины анимации. Любой способ исправить это?

Answer 1

DEMO

Вы можете сделать следующее, чтобы сделать ваш код работать, как ожидалось.

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

• Аналогично смена mouseover событий с mouseenter событие будет активироваться только в том случае, если курсор вводит элемент или его дочерний элемент.

• Чтобы избежать разворачивания текста, используйте white-space: nowrap; на .tongue классе.

JS:

$('#wrapper').on('mouseenter', '.1, .2, .3, .4, .5', function() { 
    var tongue = '<div class = "tongue">' + $(this).attr('value') + '</div>';   
    $(tongue).appendTo($(this)).animate({ 
     width: "toggle" 
    }); 
}); 
$('#wrapper').on('mouseleave', '.1, .2, .3, .4, .5', function() { 
    var that = $(this); 
    $('.tongue').animate({ 
     width: "toggle" 
    }, function() { 
     that.children('.tongue').remove(); 
    }); 
}); 

P.S: Старайтесь избегать имен классов как .1, .2, .3 они могли бы работать в Java-сценарии, но они не будут работать в CSS.

CSS не позволяет имена классов, которые начинаются с цифр, вместо этого вы можете попробовать .n_1, .n_2, .n_3 ....

Answer 2

Вам не нужно JavaScript для этого, в зависимости от уровня необходимой поддержки.
Я сделал пример, в котором я немного изменил структуру HTML, чтобы сделать его немного более семантическим IMO.
Анимация не будет работать в старом IE, но функциональность будет (IE8).

HTML:

<ul class='wrapper'> 
    <li class="button">Test</li> 
    <li class="button">Test</li> 
    <li class="button">Test</li> 
    <li class="button">Test</li> 
    <li class="button">Test</li> 
</ul> 

CSS:

.wrapper { 
    width:50px; 
    margin-left:40%; 
    list-style: none; 
    counter-reset: button-number 
} 

.button { 
    counter-increment: button-number; 
    width:50px; 
    height:50px; 
    background-color:#ccc; 
    float: left; 
    cursor:pointer; 
    position: relative; 
} 

.button:before, .button:after { 
    content:"Button number " counter(button-number); 
    width:300px; 
    height:50px; 
    position:absolute; 
    right: 50px; 
    visibility: hidden; 
} 

.button:before { 
    -webkit-transform: scaleX(0); 
    -webkit-transform-origin: left; 
    transform: scaleX(0); 
    transform-origin: left; 
    background-color:#000; 
    color:#fff; 
    -webkit-transition: -webkit-transform .4s, visibility 1s; 
    transition: transform .4s, visibility 1s; 
} 

.button:hover:before { 
    visibility: visible; 
    -webkit-transform: scaleX(1); 
} 

.button:hover:after { 
    width: 300px; 
} 

jsfiddle

Примечания:

• The: после того, как элемент есть, чтобы предотвратить "язык" от исчезновения, если мышь оставляет им Слева направо.
• Анимация transform вместо width лучше для производительности (элемент не перерисовывается) и исключает странную обертку текста во время анимации.