时间戳

首页 > 解决方案 > Choppy CSS 悬停动画

有多个元素

jquery - Choppy CSS 悬停动画
有多个元素

问题描述

我正在尝试在 CSS 中构建一个小型交互式动画，但遇到了以下问题：

动画由一个包含两个 img 和三个按钮元素的容器 div 组成。如果你将鼠标悬停在这个 div 上，一个小的 jQuery 函数会触发，它会向元素添加多个类，从而触发 CSS 动画。当光标离开 div 时，这些类将被移除并向后播放动画。

如果光标进入 div 并停留在一个元素上，则动画运行正常，但在动画过程中一旦光标碰到多个元素，它就会开始变得不稳定。您可以通过一次滑动将光标拉过图像和按钮来重现这一点。

我知道，代码有点hacky，但我正在学习。据我所知，它应该以这种方式顺利运行，因为 div 内的任何元素都不应该对悬停做出直接反应。有谁知道，为什么它没有，是什么原因造成的？

您可以在此处找到包括图片在内的所有文件：Google Drive

/*Fitnessstudio*/
$("#fit_container").mouseover(function() {
  $("#fit_container").addClass("geb_cont_anim");
  $("#fit_container").addClass("geb_cont_anim_z-index");
  $("#fit_img_grau").addClass("geb_img_anim");
}).mouseout(function() {
  $("#fit_container").removeClass("geb_cont_anim");
  $("#fit_container").removeClass("geb_cont_anim_z-index");
  $("#fit_img_grau").removeClass("geb_img_anim");
});
body {
  background-color: #3c3c3b;
}

.geb_container {
  display: inline-block;
  position: absolute;
  overflow: hidden;
  height: auto;
  transition: transform 0.5s ease-in-out;
}

.geb_img_farb, .geb_img_grau {
  top: 0;
  left: 0;
  position: absolute;
  width: 100%;
  height: auto;
}

.geb_img_grau {
  opacity: 1;
  transition: opacity 0.5s;
}

.geb_img_anim {
  opacity: 0;
}

.geb_cont_anim {
  transform: scale(1.5);
}

#fit_dummy {
  padding-top: 110%;
}

#fit_container {
  margin-top: 10%;
  margin-left: 10%;
  width: 30%;
}

/*trigger-buttons allgemein*/

button.button {
  position: absolute;
  z-index: 999;
  cursor: pointer;
  text-align: center;
  font-size: 3vw;
  font-weight: 350;
  background-color: Transparent;
  background-repeat:no-repeat;
  border: none;
  overflow: hidden;
  outline: none;
}

.button-circle {
  border-radius: 50%;
  border: 2px solid white;
  box-shadow: 2px 2px 2px;
  background-color: #aecb37;
  color: black;
  width: 2.5vw;
  height: 2.5vw;
  transform: scale(0.9, 0.9);
}

.button-circle span {
  position: absolute;
  top: -16%;
  left: 17%;
}

.button-circle:hover {
  color: white;
  background-color: black;
}

/*trigger-buttons konkret*/

#button1 {
  top: 27%;
  left: 83%;
  z-index: 99;
  -webkit-transform:translate3d(0,0,0);
}

#button2 {
  margin-top: 58%;
  left: 83%;
  z-index: 99;
  -webkit-transform:translate3d(0,0,0);
}

#button3 {
  margin-top: 90%;
  left: 83%;
  z-index: 99;
  -webkit-transform:translate3d(0,0,0);
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="style.css" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Barlow:400,700" rel="stylesheet">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
</head>

<body>
  <div class="geb_container" id="fit_container">
        <img src="img/fit_farb.png" class="geb_img_farb" id="fit_img_farb" alt="fit_farb">
        <img src="img/fit_grau.png" class="geb_img_grau" id="fit_img_grau" alt="fit_grau">
        <button id="button1" class="button fit_button" data-modal="modal1">
          <div class="button-circle"><span>+</span></div>
          </button>
        <button id="button2" class="button fit_button" data-modal="modal2">
          <div class="button-circle"><span>+</span></div>
          </button>
        <button id="button3" class="button fit_button" data-modal="modal3">
          <div class="button-circle"><span>+</span></div>
          </button>
        <div id="fit_dummy">
        </div>
      </div>
  <script src="./js/script.js"></script>
</body>

</html>

标签： jqueryhtmlcssanimation

解决方案

推荐阅读