Question

我试图添加动画，所以当我将鼠标悬停在我的照片上时，它们会淡出，另一个带有文字的div会淡入。就像在此页面上一样：http://jack-hughes.com/

但是，我把我的照片放在一个带有＆＃34; col-md-4＆＃34;等级的引导容器中。每当其中一张照片消失，其他照片就会移动到它的位置。

如何制作与示例网站类似的内容？

这是我到目前为止所做的，但它甚至都没有关闭。

$(".box-1").on('mouseover', function() {
    $(this).fadeToggle(300).addClass('back');
});

Answer 1

您是否尝试过使用hover？它将处理鼠标输入和鼠标输出事件。

您可以将每个图像的文本包装在周围的div中，并使用此div上的hover函数。另外，如果对每个图像/文本组合使用相同的类，则jQuery非常简单。

HTML

<div id="about" class="container-fluid">
<div class="header">
  About
</div>
<div class= "row front">
  <div class="col-sm-4 about-box-container">
    <img class="about-box front box-1" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">
    <div class="about-box back box-1">
       text
    </div>
  </div>
  <div class="col-sm-4 about-box-container">
    <img class="about-box front box-2" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">
    <div class="about-box back box-2">
       text
    </div>
  </div>
  <div class="col-sm-4 about-box-container">
    <img class="about-box front box-3" src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">
    <div class="about-box back box-3">
       text
    </div>
  </div>
</div>

的jQuery

$('.about-box-container').hover(
function() {
    $(this).find('.front').fadeOut(300, function() {
    $(this).siblings('.back').fadeIn(300);
    });
},
function() {
    $(this).find('.back').fadeOut(300, function() {
    $(this).siblings('.front').fadeIn(300);
    });
}

）

Demo here

Answer 2

jQuery的淡入淡出效果将元素的显示属性设置为“无”，并且其位置可以自由地用于其他元素。尝试使用 opacity 和：hover 而不使用任何JS（实际上，这是在http://jack-hughes.com处完成的操作）：

CSS：

.test {
  position: relative;
}

.test img {
  width: 100px;
  height: 100px;
  border: solid 1px lightgray;
  padding: 10px;
}

.test .test2 {
  width: 102px;
  height: 102px;
  padding: 10px;
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
  background: lightgray;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: all 0.3s ease-out;
}
.test .test2:hover {
  opacity: 1;
}

这里是基于@Tricky12的HTML更新的plunker：https://plnkr.co/edit/pGYckIcRDPZKS7Ma4vSQ?p=preview

在img和文本之间翻转

2 个答案: