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


Tags: javascript,jquery,html,css,jquery-hover

Problem :

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!



Solution :

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


    CSS Howto..

    How to work with gradients in CSS / list of online CSS gradient generators [closed]

    CSS: How to fake a :hover state?

    How to make rounded tabs with css? [closed]

    navbar is split into multiple div classes - how to stick them all to the top on scroll? (javescript)

    How to ease the whole css animation

    How to ensure both scale and slide up can occur for dynamic text using css and js?

    how do I use the :valid and :invalid selectors for css?

    How to select, focused textarea?

    How to refer in CSS to all elements that have some attribute?

    how to make 2 fixed-width sidebar div and 1 flexible-width main div?

    How to fix text with limited height and absolute position overflows

    How to hide specific TD borders in a TABLE using CSS

    How can I hide text in this jquery slider?

    How to position children with respect to parent in CSS?

    how to fix customize select box using css?

    How to reuse parts of WordPress site e.g. header, footer, part of header for multiple WordPress sites?

    How to add delay in css hover on a div that was displayed none?

    How to call am (image) div inside of a list?

    How to disable properties of external css class and use internal css class with same name but different property in html

    How to change label color with html and CSS without js?

    How can I tell if a particular CSS property is inherited with jQuery?

    How to display a horizontal line before and after a heading in css

    how to display div one by one using css

    CSS: How to select first element in each row?

    How to make an element with opacity 0 unclickable

    How to have different transition durations for css and angular transition on same element?

    How to fit 25 divs inside one div when I have more than 25 child divs?

    How to locate a list of webelement using Css selector in C#

    How to change the css of a text input using jquery?

    How to show css div depending upon model value?