Question

当用户将鼠标悬停在图片上时，我想使用animate.css来淡化/淡化内容。

我试图找出从FadeIn＆＃39;中切换课程的最佳方法。＆安培; ＆＃39; FadeInUp＆＃39;在mouseenter到＆＃39; FadeOut＆＃39; ＆安培; ＆＃39; FadeOutDown＆＃39;在mouseleave上。

Codepen Example

CSS

.overlay{
position: absolute;
top: 0;
height: 100%;
width: 100%;
background: rgba(40,40,40,0.88);
left: 0;
padding: 10px;
text-align: left;
display: none;
}
.col-sm-6:hover .overlay{
display: block;
}
.overlay h2{
font-size: 20px;
color: #fff;
}
.overlay p{
color: #bbbbbb;
}
.linkbox{
position: absolute;
height: 50px;
bottom: 0;
left: 0;
background: #000;
width: 100%;
padding: 16px;
text-align: left;
color: #fff;
}
.caption{
display: none;
}

任何帮助/意见/建议都将不胜感激！

Answer 1

试试这个脚本：

$('.col-sm-6').on('mouseenter', function(){
  $('.overlay').addClass('fadeIn fadeInUp');
  $('.overlay').removeClass('fadeOut fadeOutDown');
  $('.overlay').css('display', 'block');
});

$('.col-sm-6').on('mouseleave', function(){
  $('.overlay').removeClass('fadeIn fadeInUp');
  $('.overlay').addClass('fadeOut fadeOutDown');
  $('.overlay').css('display', 'block');
  setTimeout(function(){
     $('.overlay').css('display', 'none');
  }, 1000);
});

Answer 2

＆＃13;

const box = document.querySelector(".box");

box.addEventListener("mouseenter",function(){
  const move = "shake";
  this.classList.add(move);
  
  this.addEventListener("animationend",function(){
    this.classList.remove(move);
  });
  
  this.addEventListener("mouseleave",function(){
    this.classList.remove(move);
  });
  
});

＆＃13;

.box{
  background: skyblue;
  width: 5em;
  height: 5em;
}

＆＃13;

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<div class="box animated "></div>

＆＃13;

Answer 3

使用jQuery代替。结帐 Codepen 。

还有一些小的CSS更改，也在CSS代码中进行了注释。例如，不直接使用.col-sm-6，因为它们是非常常见的类等。

供参考，您的JS应该如下：

$(".screenshot").hover(function () {
    //stuff to do on mouse enter
    var overlay_div = $(this).find('.overlay');
    overlay_div.removeClass('fadeOut');
    overlay_div.addClass('fadeIn');
    overlay_div.find('.another-animation').removeClass('fadeOutDown');
    overlay_div.find('.another-animation').addClass('fadeInUp');
    overlay_div.css('display', 'block');
}, 
function () {
    //stuff to do on mouse leave
    var overlay_div = $(this).find('.overlay');
    $(this).find('.overlay').removeClass('fadeIn');
    $(this).find('.overlay').addClass('fadeOut');
    overlay_div.find('.another-animation').removeClass('fadeInUp');
    overlay_div.find('.another-animation').addClass('fadeOutDown');
    setTimeout(function() {
        overlay_div.css('display', 'none');
    }, 1000);
});

希望这有帮助！

在mouseenter＆amp;上添加animate.css类。鼠标离开

当用户将鼠标悬停在图片上时，我想使用animate.css来淡化/淡化内容。

CSS

3 个答案: