实现图片悬停隐藏其余图片并让对应内容滑入显示的交互效果

核心思路 #

通过监听图片的hover事件，实现以下交互：

• 鼠标悬停时：隐藏其余两张图片，同时让对应内容模块以滑入动画显示
• 鼠标离开时：恢复所有图片显示，隐藏对应内容模块

1. 基础HTML结构 #

为了让代码更易维护，使用data-target属性关联图片与对应内容模块：

<div class="image-group">
  <img src="image1.jpg" class="img-height-1" data-target="content-1" alt="图片1">
  <img src="image2.jpg" class="img-height-2" data-target="content-2" alt="图片2">
  <img src="image3.jpg" class="img-height-3" data-target="content-3" alt="图片3">
</div>

<div class="content-group">
  <div id="content-1" class="content-item">图片1对应的内容</div>
  <div id="content-2" class="content-item">图片2对应的内容</div>
  <div id="content-3" class="content-item">图片3对应的内容</div>
</div>

2. CSS样式配置 #

初始化内容模块为隐藏状态，并设置动画基础样式：

/* 图片样式（可选，根据需求调整） */
.image-group img {
  margin: 0 10px;
  cursor: pointer;
  transition: opacity 0.3s ease;
}

/* 内容模块基础样式 */
.content-group {
  margin-top: 20px;
  overflow: hidden; /* 防止动画溢出 */
}

.content-item {
  display: none;
  padding: 15px;
  background-color: #f5f5f5;
  border: 1px solid #eee;
}

3. jQuery交互逻辑实现 #

结合hover事件与jQuery动画方法，完成需求：

$(document).ready(function() {
  // 缓存DOM元素，提升性能
  const $allImages = $('.img-height-1, .img-height-2, .img-height-3');
  const $allContents = $('.content-item');

  // 绑定悬停事件
  $allImages.hover(
    // 鼠标进入时的处理
    function() {
      const targetId = $(this).data('target');
      
      // 隐藏其他图片（使用fadeOut实现平滑过渡）
      $allImages.not(this).fadeOut(300);
      
      // 显示对应内容，使用slideUp的反向逻辑（slideDown实现滑入效果）
      // 若需要内容从下方滑入，可替换为CSS过渡方案（见下文）
      $allContents.slideUp(200);
      $('#' + targetId).slideDown(400);
    },
    // 鼠标离开时的处理
    function() {
      // 恢复所有图片显示
      $allImages.fadeIn(300);
      
      // 隐藏所有内容
      $allContents.slideUp(400);
    }
  );
});

可选：CSS实现内容向上滑入效果 #

如果需要内容从容器底部向上滑入（而非向下展开），可替换为以下CSS+JS方案：

调整后的CSS #

.content-group {
  position: relative;
  height: 200px; /* 根据内容高度设置 */
  overflow: hidden;
}

.content-item {
  position: absolute;
  bottom: -100%;
  left: 0;
  right: 0;
  padding: 15px;
  background-color: #f5f5f5;
  border: 1px solid #eee;
  transition: bottom 0.4s ease;
}

.content-item.active {
  bottom: 0;
}

对应jQuery代码 #

$(document).ready(function() {
  const $allImages = $('.img-height-1, .img-height-2, .img-height-3');
  const $allContents = $('.content-item');

  $allImages.hover(
    function() {
      const targetId = $(this).data('target');
      $allImages.not(this).fadeOut(300);
      
      // 移除所有内容的active类，给目标内容添加active类触发动画
      $allContents.removeClass('active');
      $('#' + targetId).addClass('active');
    },
    function() {
      $allImages.fadeIn(300);
      $allContents.removeClass('active');
    }
  );
});

内容的提问来源于stack exchange，提问作者Aimal Siddique