如何让每个悬停时jQuery识别鼠标悬停在图像上一次

时间：2022-03-05 09:00:59

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:

当鼠标悬停在图片上时，我试图为图片添加动画效果。我目前正在使用“animate.css”来获取动画。有两个问题：

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).

1）如何让jQuery在每次悬停时“触发”我的脚本一次？例如，如果我创建一个警报，警报将会多次触发（将鼠标悬停并将其取下）。

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

2）我当前的jQuery语法有什么问题？动画无法播放。

HTML

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

JS

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

My CSS

我的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

在这里查看animate.css

Could my CSS files cause a conflict?

我的CSS文件会导致冲突吗？

Thanks in advance!

提前致谢！

1 个解决方案

#1

2  

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.

在你的JS中，我会使用mouseenter和mouseleave事件处理程序。根据你的解释，这应该很好。当鼠标进入div时，它会发射一次，当它离开时，它会发射一次。

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

#1

2  

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.

在你的JS中，我会使用mouseenter和mouseleave事件处理程序。根据你的解释，这应该很好。当鼠标进入div时，它会发射一次，当它离开时，它会发射一次。

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

标签：

相关文章