Question

this problem only appears in Firefox.

I tried do minimize my code as much as possible: JSFiddle Example

I have a menu at the bottom of the page which is on display: none. Above is my Button to call the slideToggle function. Could you please hover this Button in Firefox a few times to see what I mean. Sometimes my menu slides down and slides up immediately, although the cursor is still inside the menu div. This problem mostly appears when you hover the menu button, by moving the cursor below the text "Menu".

HTML

<div id="menuBtnFake">Menü</div>

<div id="menu">

    <div id="menuBtn">Menü</div>

    <ul>
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
        <li><a href="#">Link 5</a></li>
        <li><a href="#">Link 6</a></li>
        <li><a href="#">Link 7</a></li>
    </ul>

</div> <!-- #menu -->

jQuery

jQuery(document).ready(function(){

// Get window width + height
var windowWidth = $(window).width();
var windowHeight = $(window).height();

$('#container1').css({
    'width': windowWidth,
    'height': windowHeight
});

// menu toggle
$('#menuBtnFake').hoverIntent({
    over: menuSlideUp
});

$('#menu').mouseleave(function(){
    $(this).slideUp();
    $('#contentFader').fadeIn(500);
});

$('#menuBtn').click(function(){
    $('#menu').slideUp();
    $('#contentFader').fadeIn(500);
});

});

function menuSlideUp(){
$('#menu').slideToggle(500);
$('#contentFader').fadeOut(700);

}

Was it helpful?

Solution

I think the behavior had stacked menuSlideUp and slideUp. I added a 'if' checking if the other function of sliding is not executed. http://jsfiddle.net/g7eYH/1/

correct code seems to be:

jQuery(document).ready(function(){

    // Get window width + height
    var windowWidth = $(window).width();
    var windowHeight = $(window).height();
    document.myslide=0;

    $('#container1').css({
        'width': windowWidth,
        'height': windowHeight
    });

    // menu toggle
    $('#menuBtnFake').hoverIntent({
        over: menuSlideUp
    });

    $('#menu').mouseleave(function(){
        if(document.myslide==0){
          $(this).slideUp(500);
        }else{
             //double slide behavior occurs here 
        }
        $('#contentFader').fadeIn(500);
    });

    $('#menuBtn').click(function(){
        $('#menu').slideUp();
        $('#contentFader').fadeIn(500);
    });

});

function menuSlideUp(){
        document.myslide=1;
        $('#menu').slideToggle(500, function(){ document.myslide=0});




    $('#contentFader').fadeOut(700);
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top