jquery - 悬停时使用 fadeInUp 显示 div，鼠标悬停时显示 fadeOutDown

Question

我想制作一个盒子，当我将鼠标悬停在那个盒子上时，我的 div 显示带有 fadeInUp 动画，并且在鼠标悬停动画 fadeOutDown 加载后

我会尝试这个但没有成功:

$(".link-box").hover(function(event){
    $('div[class^='link-txt-']').addClass('fadeInUp visible');
},function(){
    $('div[class^='link-txt-']').removeClass('fadeOutDown');
});

.links {
    width: 100%;
    height: 43vh;
}
.link-section {
    float: left;
    width: 33.333%;
    text-align: center;
	position:relative;
}
.link-box {
    width: 50%;
    border-radius: 100%;
    height: 34vh;
    border: 2px solid #0d0d0d;
    margin: auto;
}
.link-img {
    width: 100%;
    border-radius: 100%;
    height: 34vh;
}
div[class^="link-txt"] {
    border-radius: 100%;
    height: 34vh;
    position: absolute;
    top: 0;
    width: 50%;
    text-align: center;
    background: rgba(13,13,13,0.7);
	display:none;
	border:1px solid rgba(13,13,13,0.7);
}
div[class^="link-txt"] span {
    width: 80%;
    height: 15vh;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    color: #FFF;
    left: 0;
    right: 0;
}

.visible {display:block;}
.hidden {display:none;}

	<div class="links">
	 <div class="link-section">
	  <div class="link-box">
	   <img src="images/slider/2.jpg" class="link-img" alt="Forum" />
	   <div class="link-txt-1"> <span> Test mikonim forum ro 1 2 3 4 atefe eshghame </span> </div>
	  </div>
	 </div>
	 <div class="link-section">
	  <div class="link-box">
	   <img src="images/slider/2.jpg" class="link-img" alt="Forum" />
	   <div class="link-txt-2"> <span> Test mikonim forum ro 1 2 3 4 6 alireza miodi atefe eshghe alirezas </span> </div>
	  </div>
	 </div>
	 <div class="link-section">
	  <div class="link-box">
	   <img src="images/slider/2.jpg" class="link-img" alt="Forum" />
	   <div class="link-txt-3"> <span> Test mikonim forum ro 1 2 3 4 </span> </div>
	  </div>
	 </div>
	</div>

我也使用这个 css 文件:https://daneden.github.io/animate.css/

Answer 1

如果我理解正确，这一定对你有用，

查看 animate.css 文档，您必须添加 animated fadeInUp 而不仅仅是动画名称。

您的动画也不会显示，因为您的 div 实际上被您的 CSS 隐藏了，因此我们也需要在动画之前显示。

$(".link-box").hover(function(event) {
  $(this).find('div[class*=link-txt-]').show();
  $('div[class*=link-txt-]').addClass('animated fadeInUp visible');
}, function() {
  $(this).find('div[class*=link-txt-]').addClass(' animated fadeOutDown');
});

.links {
  width: 100%;
  height: 43vh;
}
.link-section {
  float: left;
  width: 33.333%;
  text-align: center;
  position: relative;
}
.link-box {
  width: 50%;
  border-radius: 100%;
  height: 34vh;
  border: 2px solid #0d0d0d;
  margin: auto;
}
.link-img {
  width: 100%;
  border-radius: 100%;
  height: 34vh;
}
div[class^="link-txt"] {
  border-radius: 100%;
  height: 34vh;
  position: absolute;
  top: 0;
  width: 50%;
  text-align: center;
  background: rgba(13, 13, 13, 0.7);
  display: none;
  border: 1px solid rgba(13, 13, 13, 0.7);
}
div[class^="link-txt"] span {
  width: 80%;
  height: 15vh;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  color: #FFF;
  left: 0;
  right: 0;
}
.visible {
  display: block;
}
.hidden {
  display: none;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="links">
  <div class="link-section">
    <div class="link-box">
      <img src="images/slider/2.jpg" class="link-img" alt="Forum" />
      <div class="link-txt-1"> <span> Test mikonim forum ro 1 2 3 4 atefe eshghame </span> 
      </div>
    </div>
  </div>
  <div class="link-section">
    <div class="link-box">
      <img src="images/slider/2.jpg" class="link-img" alt="Forum" />
      <div class="link-txt-2"> <span> Test mikonim forum ro 1 2 3 4 6 alireza miodi atefe eshghe alirezas </span> 
      </div>
    </div>
  </div>
  <div class="link-section">
    <div class="link-box">
      <img src="images/slider/2.jpg" class="link-img" alt="Forum" />
      <div class="link-txt-3"> <span> Test mikonim forum ro 1 2 3 4 </span> 
      </div>
    </div>
  </div>
</div>