문제

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