Question

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

我会尝试这个但是没有工作：

＆＃13;

(pre_v2.next).next

＆＃13;

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

＆＃13;

.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;}

＆＃13;

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

Answer 1

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

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

此外，您的动画也不会显示，因为您的div实际上是由CSS隐藏的，所以我们在制作动画之前也需要show。

＆＃13;

$(".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');
});

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 2

我能找到它：D

这是我的代码，这非常好用：

＆＃13;

$(function() {
    $('.link-box').hover(function() {
        $(this).find('div[class^=link-txt-]').removeClass('visible animated fadeOutUp');
        $(this).find('div[class^=link-txt-]').addClass('visible animated fadeInDown');
      },
      function(){
        $(this).find('div[class^=link-txt-]').removeClass('visible animated fadeInDown');
        $(this).find('div[class^=link-txt-]').addClass('visible animated fadeOutUp');
      }
   );
});

＆＃13;

.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 !important;}

＆＃13;

<link href="http://persian-gamers.ir/images/gioco/css/animate.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/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>

＆＃13;

谢谢大家

Answer 3

也可以使用animate CSS

非常容易使用。 Exmp： -

<html> <div class="animated fadeInUp "> test </div> </html>

并使用fadeOutDown或悬停时需要的任何内容

在鼠标悬停时使用悬停时的fadeInUp和foverOutDown显示div

3 个答案: