Wie bekomme ich jQuery, um Maus über Bild einmal pro Hover zu erkennen

Ich versuche ein Bild zu animieren, wenn die Maus darüber schwebt. Ich verwende derzeit "animate.css", um die Animation zu erhalten. Es gibt zwei Probleme:Wie bekomme ich jQuery, um Maus über Bild einmal pro Hover zu erkennen

1) Wie bekomme ich jQuery mein Skript einmal per Hover "feuern"? Wenn ich zum Beispiel einen Alarm erstelle, wird der Alarm mehrere Male ausgelöst (die Maus über den Bildschirm ziehen und ausziehen).

2) Was stimmt nicht mit meiner aktuellen jQuery-Syntax? Die Animation wird nicht wiedergegeben.

HTML

<!DOCTYPE html> 
<html> 
    <head> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <link href="CSS/stylesheet_test.css" rel="stylesheet" type="text/css"> 
    <link rel="stylesheet" href="CSS/animate.css"> 
    <link href="https://fonts.googleapis.com/css?family=Work+Sans:500&amp;subset=latin-ext" rel="stylesheet"> 
    <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet"> 
    <script type="text/javascript" src="scripts/jquery-3.1.1.min.js"></script> 
    <script type="text/javascript" src="scripts/test.js"></script> 
    <title>Daryl N.</title> 
    </head> 
    <body> 
    <div class="container"> 
     <div class="navbar"> 
     <div class="nav-text"><span id="home"><a href="index_test.html">Home</a></span><span id="archive">Archive</span></div> 
     </div> 
     <div id="first" class="background"> 
     <div class="align-vert"><img id="me-pic" src="./images/me.jpg" alt="A picture of me is suppose to be here" style="width:240px;height:240px;" class="me-border animated bounceIn"><span class="daryl animated bounceIn">Hi, I'm Daryl</span></div> 
     </div> 
     <script type="text/javascript" src="scripts/test.js"></script> 
     <div id="second" class="background"> 
     <p class="align-vert">This is my personal website</p> 
     </div> 
    </div> 
    </body> 
</html>

$(document).ready(function() 
{ 
    $('#me-pic').hover(function() 
    { 
    $(".bounceIn").toggleClass("bounce"); 
    }); 
});

Meine CSS

body,html 
{ 
    width: 100%; 
    min-width: 200px; 
    height: 100%; 
    padding: 0; 
    margin: 0; 
} 

.container 
{ 
    width: 100%; 
    min-width: 500px; 
    height: 100%; 
} 

.background 
{ 
    height: 100%; 
    width: 100%; 
    display: inline-block; 
    position: relative; 
    z-index: 1; 
} 

.align-vert 
{ 
    text-align: center; 
    position: relative; 
    top: 50%; 
    transform: translateY(-50%); 
} 

.me-border 
{ 
    border-radius: 50%; 
    border: 2px solid #FFF; 
    vertical-align:middle 
} 

.navbar 
{ 
    position: fixed; 
    background-color: rgba(0, 0, 0, 0.9); 
    margin: 0; 
    padding: 0; 
    width: 100%; 
    height: 50px; 
    z-index: 2; 
} 

.nav-text 
{ 
    color: #a3a3a3; 
    font-family: 'Raleway', sans-serif; 
    font-weight: 600; 
    font-size: 16px; 
    text-align: center; 
    position: relative; 
    top: 50%; 
    transform: translateY(-50%); 
} 
    #home 
    { 
    margin-right: 50px; 
    } 

    #home:hover 
    { 
     color: #777777; 
    } 

    #home a:hover, a:visited, a:link, a:active 
    { 
     text-decoration: none; 
     color: inherit; 
    } 

    #archive 
    { 
    margin-left: 50px; 
    } 

    #archive:hover 
    { 
     color: #777777; 
    } 


.daryl 
{ 
    font-family: 'Work Sans', sans-serif; 
    display: inline-block; 
    padding-left: 20px; 
    font-size: 30px; 
    color: #FFF; 
} 
#first 
{ 
    background: #2C2D45; 
} 

#second 
{ 
    background: #354677; 
    font-size: 40px; 
    font-family: 'Work Sans', sans-serif; 
    color: white; 
}

here für animate.css Siehe

Könnte meine CSS-Dateien verursachen einen Konflikt?

Vielen Dank im Voraus!

Quelle

2016-11-23 darylnak

Sie zeigten keine CSS. Was ist ein Klassensprung? – Banzay

Bitte sehen Sie meinen aktualisierten Beitrag. – darylnak

Ich bin nicht wirklich sicher, das Problem, das Sie haben, aber Sie können Mouseenter anstelle von Hover versuchen und sehen, ob es funktioniert – Chiller

In Ihrem JS, würde ich stattdessen verwenden, um die MouseEnter- und mouseleave Event-Handler. Basierend auf Ihrer Erklärung sollte dies gut dienen. Es wird genau einmal ausgelöst, wenn die Maus in das Div eindringt, und einmal, wenn sie es verlässt.

$(document).ready(function() 
 
{ 
 
    $('#me-pic').on('mouseenter', function() { 
 
    $(".bounceIn").toggleClass("bounce"); 
 
    }); 
 
    
 
    $('#me-pic').on('mouseleave', function() { 
 
    $(".bounceIn").toggleClass("bounce"); 
 
    }); 
 
    
 
});

Quelle

2016-11-23 20:28:08

Die '.hover()' -Methode, wenn eine einzelne Funktion übergeben, führt diesen Handler für beide Mouseenter und mouseleave Ereignisse . Dadurch kann der Benutzer die verschiedenen Umschaltmethoden von jQuery innerhalb des Handlers verwenden oder je nach Ereignis innerhalb des Handlers unterschiedlich reagieren. Type – Banzay

Dies scheint bei animate.css nicht zu funktionieren. Ich habe deine Methode mit einer Warnung versucht und es funktioniert. An animate.css scheint etwas Besonderes zu sein, das verhindert, dass die Effekte richtig ausgelöst werden. Danke für die Hilfe! – darylnak

Wie bekomme ich jQuery, um Maus über Bild einmal pro Hover zu erkennen

Antwort

Verwandte Themen