jQuery가 호버 당 한 번 이미지 위에서 마우스를 인식하도록하는 방법

마우스를 가리키면 그림이 애니메이션으로 표시됩니다. 나는 현재 "animate.css"를 사용하여 애니메이션을 얻고 있습니다. 두 가지 문제가 있습니다 :jQuery가 호버 당 한 번 이미지 위에서 마우스를 인식하도록하는 방법

1) jQuery가 마우스를 올릴 때마다 스크립트를 "실행"하게하려면 어떻게해야합니까? 예를 들어, 경고를 작성하면 경고가 여러 번 발동합니다 (마우스를 올리거나 내릴 때).

2) 현재 jQuery 구문에 어떤 문제가 있습니까? 애니메이션이 재생되지 않습니다.

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

내 CSS 파일이 충돌을 일으킬 수

animate.css

에 대한 here를 참조

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

내 CSS?

미리 감사드립니다. 당신의 JS에서

출처

2016-11-23 darylnak

당신은 CSS를 보이지 않았다. 클래스 '반송'이란 무엇입니까? – Banzay

내 업데이트 된 게시물을 참조하십시오. – darylnak

당신이 가지고있는 문제는 잘 모르겠지만 마우스가 움직이지 않고 mouseenter를 시도해 볼 수 있습니다. – Chiller

, 내가 대신 mouseenter 및 하는 MouseLeave 이벤트 핸들러를 사용합니다. 귀하의 설명에 따라, 이것은 훌륭하게 도움이 될 것입니다. 마우스가 div에 들어가면 한 번만 발사되고, div가 끝나면 한 번만 발사됩니다.

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

출처

2016-11-23 20:28:08

'.hover()'메서드는 단일 함수를 전달할 때 mouseenter와 mouseleave 이벤트 모두에 대해 해당 핸들러를 실행합니다 . 이를 통해 사용자는 핸들러 내에서 jQuery의 다양한 토글 메소드를 사용하거나 event.type에 따라 핸들러 내에서 다르게 응답 할 수 있습니다. – Banzay

animate.css에서는 작동하지 않습니다. 나는 당신의 방법을 경계심으로 시도해 보았습니다. 애니메이션 효과가 제대로 발사되지 못하게하는 animate.css의 특별한 기능이있는 것 같습니다. 도와 주셔서 감사합니다! – darylnak

jQuery가 호버 당 한 번 이미지 위에서 마우스를 인식하도록하는 방법

답변

관련 문제