Salut J'ai créé un menu que vous pouvez sélectionner dans les événements "mouseover" ou "click".jQuery bascule l'affichage de l'élément en fonction de la sélection du menu au passage de la souris
voir:
Le résultat de faire une sélection est que je veux qu'il se fanent sur l'élément sélectionné précédent/existant et fondu dans l'élément sélectionné qui a un identifiant qui correspond à celle spécifié par l'attribut data-displaypanel.
Cela fonctionne bien ...
<ul class="topic-blocks list-unstyled">
<li class="keyword-panel" id="subjectcollection_A_C" style="display: list-
....
</li>
<li class="keyword-panel" id="subjectcollection_D_H" style="display: list-
....
</li>
Toutefois, lorsque vous mouseover rapidement entre les différents éléments du menu, il semble être l'annulation de la fonction fadeOut avant qu'il ait une chance de terminer donc laisser plus de un élément visible ....
Y at-il un moyen de remédier à cela? J'ai essayé différentes méthodes sans succès.
$(".keyword-navigation li > a").on('click mouseenter', function(e) {
e.preventDefault();
var ithis = $(this);
if (!ithis.parent('li').hasClass('active')){
var prevActivePanel = ithis.closest('.keyword-navigation')
.find('.active')
.removeClass('active')
.children('a')
.data('displaypanel'),
currentActivePanel= ithis.parent('li')
.addClass('active')
.end()
.data('displaypanel');
$(prevActivePanel).fadeOut("fast", function() {
$(this).addClass('hidden');
$(currentActivePanel)
.fadeIn("fast", function() {
history.pushState(null, null, currentActivePanel);
}).removeClass('hidden');
});
}
});
Voir mon jsFiddle: https://jsfiddle.net/angusgrant/ov2zezmv/
Un grand merci Angus