Hover-Funktion wiederholt sich, wenn Sie die Maus innerhalb der Auswahl bewegen

Question

Ich habe eine Animation, die auf Schwebeflug innerhalb bestimmter divs feuert. Wenn sich die Maus im div befindet, wird der Hover-Effekt erneut ausgelöst, wenn Sie ihn an eine andere Stelle im div bewegen. Ich habe versucht, mit mouseenter/mouseleave und das macht das gleiche.

Wie kann ich die Funktion nur auf Mouseenter und Mouselave auslösen und nicht, wenn sie sich innerhalb des Selektors bewegt?

DEMO

$('#nav, #footer, #leftNav, #rightNav').hover(function() { 
    $('#navFill').animate({ 
    left: 0 
    }, 300); 
    $('#footerFill').animate({ 
    left: 0 
    }, 300); 
    $('#leftNavFill').animate({ 
    top: 0 
    }, 300); 
    $('#rightNavFill').animate({ 
    top: 0 
    }, 300); 
}, function() { 
    $('#navFill').animate({ 
    left: '-100vw' 
    }, 300); 
    $('#footerFill').animate({ 
    left: '100vw' 
    }, 300); 
    $('#leftNavFill').animate({ 
    top: '100vh' 
    }, 300); 
    $('#rightNavFill').animate({ 
    top: '-100vh' 
    }, 300); 
}); 

Answer 1

Gemäß Ihrem Code rufen Sie beide Animationen im selben Hover-Ereignis auf, oder sagen Sie, dass Sie versuchen, sie beim selben mouseenter- und mouseleave-Ereignis zu animieren. Probieren Sie stattdessen etwas ähnliches aus.

$('#nav, #footer, #leftNav, #rightNav').mouseenter(function() { 
 
console.log("mouseenter"); 
 
    $('#navFill').animate({ 
 
    left: 0 
 
    }, 300); 
 
    $('#footerFill').animate({ 
 
    left: 0 
 
    }, 300); 
 
    $('#leftNavFill').animate({ 
 
    top: 0 
 
    }, 300); 
 
    $('#rightNavFill').animate({ 
 
    top: 0 
 
    }, 300); 
 
}); 
 

 

 
$('#navFill, #footerFill, #leftNavFill, #rightNavFill').mouseleave(function() { 
 
console.log("mouseleave"); 
 
    $('#navFill').animate({ 
 
    left: '-100vw' 
 
    }, 300); 
 
    $('#footerFill').animate({ 
 
    left: '100vw' 
 
    }, 300); 
 
    $('#leftNavFill').animate({ 
 
    top: '100vh' 
 
    }, 300); 
 
    $('#rightNavFill').animate({ 
 
    top: '-100vh' 
 
    }, 300); 
 
});

#nav { 
 
    background-color: rgba(86, 55, 144, 0.95); 
 
    width: 100vw; 
 
    height: 7.5vh; 
 
    z-index: 10; 
 
    box-shadow: 0px 2px 3px #000; 
 
    position: fixed; 
 
} 
 

 
#navBars { 
 
    position: absolute; 
 
    left: 5vw; 
 
    transform: scaleY(.75); 
 
    line-height: 7.5vh; 
 
    cursor: pointer; 
 
    color: #f0f0f0; 
 
} 
 

 
#navigation { 
 
    margin-left: 10vw; 
 
} 
 

 
.navigation { 
 
    display: inline; 
 
    position: relative; 
 
    left: -3vw; 
 
    margin-left: 3vw; 
 
    font-family: 'Josefin Sans', sans-serif; 
 
    font-weight: 700; 
 
    font-size: 28px; 
 
    line-height: 7.5vh; 
 
    cursor: pointer; 
 
    color: #f0f0f0; 
 
} 
 

 
#leftNav { 
 
    height: 100vh; 
 
    width: 2vw; 
 
    background-color: rgba(86, 55, 144, 1); 
 
    position: fixed; 
 
    z-index: 11; 
 
    box-shadow: 2px 0px 3px #000; 
 
} 
 

 
#rightNav { 
 
    height: 100vh; 
 
    width: 2vw; 
 
    left: 98vw; 
 
    background-color: rgba(86, 55, 144, 1); 
 
    position: fixed; 
 
    z-index: 11; 
 
    box-shadow: -2px 0px 3px #000; 
 
} 
 

 
#footer { 
 
    background-color: rgba(86, 55, 144, 0.95); 
 
    width: 100vw; 
 
    height: 5vh; 
 
    top: 95vh; 
 
    z-index: 10; 
 
    box-shadow: 0px -2px 3px #000; 
 
    position: fixed; 
 
} 
 

 
#navFill { 
 
    background-color: rgba(240, 240, 240, .95); 
 
    width: 100vw; 
 
    left: -100vw; 
 
    height: 7.5vh; 
 
    z-index: 10; 
 
    position: fixed; 
 
} 
 

 
#footerFill { 
 
    background-color: rgba(240, 240, 240, .95); 
 
    width: 100vw; 
 
    left: 100vw; 
 
    top: 95vh; 
 
    height: 5vh; 
 
    z-index: 10; 
 
    position: fixed; 
 
} 
 

 
#leftNavFill { 
 
    height: 100vh; 
 
    width: 2vw; 
 
    background-color: rgba(240, 240, 240, 1); 
 
    top: 100vh; 
 
    position: fixed; 
 
    z-index: 11; 
 
    box-shadow: 2px 0px 3px #000; 
 
} 
 

 
#rightNavFill { 
 
    height: 100vh; 
 
    width: 2vw; 
 
    left: 98vw; 
 
    background-color: rgba(240, 240, 240, 1); 
 
    top: -100vh; 
 
    position: fixed; 
 
    z-index: 12; 
 
    box-shadow: 2px 0px 3px #000; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav id="nav"> 
 
    <i class="fa fa-bars fa-3x" id="navBars"></i> 
 
    <ul id="navigation"> 
 
    <li id="homeNav" class="navigation">Home</li> 
 
    <li id="aboutNav" class="navigation">About</li> 
 
    <li id="portNav" class="navigation">Portfolio</li> 
 
    <li id="contactNav" class="navigation">Contact</li> 
 
    </ul> 
 
</nav> 
 
<div id="leftNav"></div> 
 
<div id="rightNav"></div> 
 
<footer id="footer"> 
 

 
</footer> 
 
<div id="leftNavFill"></div> 
 
<div id="rightNavFill"></div> 
 
<div id="navFill"></div> 
 
<div id="footerFill"></div>

Hier wird die Fiddle Aktualisiert

Und auch, sobald die Maus den div betritt Sie navFill und andere animieren, die nicht die gleichen Abteilungen sind zu denen der mousenter Ereignis gebunden. Daher wird das mouseleave-Ereignis zur selben Zeit ausgeführt, da die Animation animiert und somit das mouseleave-Ereignis ausgeführt wird.

Answer 2

Die Animation könnte die ganze nav führen zu schrumpfen, weil dieser, die Navigation mit der Maus "einfach mal" in die nav berücksichtigen.

Answer 3

ich glaube, das Problem mit dem animierten DIVs liegt (das heißt #navFill, #leftNavFill, #rightNavFill und #footerFill) über die nicht-animieren DIVs zu sein (das heißt #nav, #leftNav, #rightNav und #footer). Wenn ein animierter DIV animiert wird, überstreicht er den nicht animierten DIV darunter und veranlasst ihn, das Ereignis mouseenter/mouseleave auszulösen. Vielleicht in einfachen Worten, sobald die graue Leiste den violetten Bereich und die Maus bedeckt, haben Sie nur links die violette Fläche (die das mouseleave Ereignis verursacht). Und umgekehrt, wenn der graue Balken den violetten Bereich freilegt.

Also kam das Problem auf, wie mache ich die animierten DIVs über den nicht animierten DIVs erscheinen, ohne sie wählbar? Sie können die CSS-Eigenschaft pointer-events: none an Ihre animierten DIVs anhängen.

Demo