Hi I have created a menu that you can make selection on either "mouseover" or "click" events.
see:
<ul class="nav nav-pills nav-justified keyword-navigation">
<li class="active"><a href="#" data-displaypanel="#subjectcollection_A_C">A- C</a></li>
<li class=""><a href="#" data-displaypanel="#subjectcollection_D_H">D-H</a></li>
<li><a href="#" data-displaypanel="#subjectcollection_I_N">I-N</a></li>
...
The result of making a selection is that I want it to fade out the previous/existing selected element and fade in the selected element that has an id that matches that specified by the data-displaypanel attribute.
This works fine...
<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>
However when you mouseover quickly between the different menu items it appears to be cancelling the fadeOut function before it has a chance to complete therefore leaving more than one element visible....
Is there any way to remedy this? I have tried various different methods with no luck.
$(".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');
});
}
});
See my jsfiddle: https://jsfiddle.net/angusgrant/ov2zezmv/
Many thanks Angus
