【问题标题】：show div with fadeInUp on hover and fadeOutDown on mouseover在鼠标悬停时显示带有淡入淡出和在鼠标悬停时淡出淡出的 div
【发布时间】：2016-11-22 18:06:03
【问题描述】：
我想制作一个框，当我将鼠标悬停在该框上时，我的 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/
【问题讨论】：
标签：
jquery
html
css
animation
jquery-hover
【解决方案1】：
如果我理解正确，这一定对你有用，
查看 animate.css 文档，您必须添加 animated fadeInUp 而不仅仅是动画名称。
您的动画也不会显示，因为您的 div 实际上被您的 CSS 隐藏了，所以我们需要在动画之前show。
$(".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>
【解决方案2】：
我可以找到它：D
这是我的代码，效果很好：
$(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');
}
);
});
.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;}
<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>
谢谢大家
【解决方案3】：
也可以使用animate CSS
非常容易使用。
例如：-
<html> <div class="animated fadeInUp "> test </div> </html>
并在悬停时使用 fadeOutDown 或任何您需要的东西