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);

}

有帮助吗?

解决方案

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);
}
许可以下: CC-BY-SA归因
不隶属于 StackOverflow
scroll top