Question

我在div上创建了一个背景图像，当用户将鼠标悬停在图像上时，会出现一个包含相关信息的div。鼠标离开时我出现在鼠标输入和fadeOut（）上。每次更新一个名为“幻灯片”的类。但是，它只会更新一次类。只需使用它就可以完美地运行，而无需额外的fadeOut（）函数。我错过了什么？

$(document).ready(function() {
  $(".fashion-img1").mouseenter(function() {
    $(".fashion-img-content1").toggleClass("slide");
  });

  $(".fashion-img1").mouseleave(function() {
    $(".fashion-img-content1").fadeOut(1000, function() {
      $(this).toggleClass("slide");
    });
  });
});

.fashion-img-content1,
.fashion-img-content2,
.fashion-img-content3 {
  margin: 40% 15% 0 10%;
  visibility: hidden;
  padding: 20px;
  min-height: 200px;
  background-color: #f9f9f9;
  color: #333;
}
.slideanim {
  visibility: hidden;
}
.slide {
  animation-name: slide;
  -webkit-animation-name: slide;
  animation-duration: 1s;
  -webkit-animation-duration: 1s;
  visibility: visible;
}
@keyframes slide {
  0% {
    opacity: 0;
    transform: translateY(70%);
  }
  100% {
    opacity: 1;
    transform: translateY(0%);
  }
}
@-webkit-keyframes slide {
  0% {
    opacity: 0;
    -webkit-transform: translateY(70%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0%);
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="row slideanim img-row">
  <div class="col-md-4">
    <div class="fashion-img1">
      <div class="fashion-img-content1 text-center">
        <span class="glyphicon glyphicon-search"></span>
        <p>Tellus purus praesent orci, integer sapien a lorem orci augue, arcu at eleifend vestibulum quam, provident rutrum ut ridiculus duis.</p>
      </div>
    </div>
  </div>

  <div class="col-md-4">
    <div class="fashion-img2">
      <div class="fashion-img-content2 text-center">
        <span class="glyphicon glyphicon-search"></span>
        <p>Tellus purus praesent orci, integer sapien a lorem orci augue, arcu at eleifend vestibulum quam, provident rutrum ut ridiculus duis.</p>
      </div>
    </div>
  </div>

  <div class="col-md-4">
    <div class="fashion-img3">
      <div class="fashion-img-content3 text-center">
        <span class="glyphicon glyphicon-search"></span>
        <p>Tellus purus praesent orci, integer sapien a lorem orci augue, arcu at eleifend vestibulum quam, provident rutrum ut ridiculus duis.</p>
      </div>
    </div>
  </div>
</div>

Answer 1

Div ID必须是唯一的，而Div Classes是通用的。您目前正在为您的课程提供唯一的名称，这就是您的代码未正确定位DIV的原因。

此外，每次离开并重新输入时，使用toggleClass都会重新切换类 - 从而有效地撤消操作。所以为了清楚起见，这已经改为addClass和removeClass。

最后，在使用fadeOut时，你将div的不透明度淡化为零，然后应用CSS display:none;将其从显示中删除。这与CSS visibility: none;不同，正如@Daniel在评论中指出的那样。

更新：更新代码段以反映信息淡入淡出

以下代码段说明了类切换和类名的适当使用：

$(".fashion-img").mouseenter(function() {
  $(this).find(".fashion-img-content").addClass("slide");
  $(this).find(".info").fadeIn();
});

$(".fashion-img").mouseleave(function() {
  $(this).find(".fashion-img-content").removeClass("slide");
  $(this).find(".info").fadeOut();
});

.fashion-img-content {
  width: 100px;
  height: 100px;
  background: #333;
  margin-top: 10px;
}
.info {
  display: none;
  position: absolute;
}
.slide {
  background: #09f;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="row slideanim img-row">
  <div class="col-md-4">
    <div class="fashion-img">
      <div class="fashion-img-content text-center">
        <span class="glyphicon glyphicon-search"></span>
        <p class="info">Tellus purus praesent orci, integer sapien a lorem orci augue, arcu at eleifend vestibulum quam, provident rutrum ut ridiculus duis.</p>
      </div>
    </div>
  </div>

  <div class="col-md-4">
    <div class="fashion-img">
      <div class="fashion-img-content text-center">
        <span class="glyphicon glyphicon-search"></span>
        <p class="info">Tellus purus praesent orci, integer sapien a lorem orci augue, arcu at eleifend vestibulum quam, provident rutrum ut ridiculus duis.</p>
      </div>
    </div>
  </div>

  <div class="col-md-4">
    <div class="fashion-img">
      <div class="fashion-img-content text-center">
        <span class="glyphicon glyphicon-search"></span>
        <p class="info">Tellus purus praesent orci, integer sapien a lorem orci augue, arcu at eleifend vestibulum quam, provident rutrum ut ridiculus duis.</p>
      </div>
    </div>
  </div>
</div>

jQuery鼠标输入和鼠标离开不更新类

1 个答案: