CODEWITHSUNDEEP
javascriptjqueryhtmlcssjquery-hover
darylnak
darylnak

Reputation: 239

How to get jQuery to recognize mouse over image once per hover

I am trying to animate a picture when the mouse hovers over it. I am currently using "animate.css" to get the animation. There are two problems:

1) How do I get jQuery to "fire" my script once per hover? For example, if I create an alert, the alert will fire several times (putting the mouse over and taking it off).

2) What is wrong with my current jQuery syntax? The animation does not play.

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>

JS

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

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

See here for animate.css

Could my CSS files cause a conflict?

Thanks in advance!

Upvotes: 0

Views: 706

Answers (1)

Eric Wich
Eric Wich

Reputation: 1544

In your JS, I would instead use the mouseenter and mouseleave event handlers. Based on your explanation, this should serve nicely. It will fire exactly once when the mouse enters the div, and once when it leaves.

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

Upvotes: 2

Related Questions