jquery animate实现鼠标放上去显示离开隐藏效果

要实现“jquery animate实现鼠标放上去显示离开隐藏效果”的效果，我们可以按照以下步骤进行：

要实现“jquery animate实现鼠标放上去显示离开隐藏效果”的效果，我们可以按照以下步骤进行：

第一步：编写HTML结构

首先，我们需要编写一个HTML结构，例如：

<div class="box">
  <img src="image.jpg">
  <div class="overlay"></div>
</div>

其中，box是容器元素，img是要显示的图片元素，overlay是要实现鼠标放上去显示离开隐藏效果的遮罩层元素。

第二步：编写CSS样式

接下来，我们需要编写CSS样式，为元素添加布局和样式，例如：

.box {
  position: relative;
  width: 200px;
  height: 200px;
}

.box img {
  width: 100%;
  height: 100%;
  display: block;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.overlay:hover {
  opacity: 1;
}

其中，我们使用了CSS的position属性将box设置为相对定位，为img设置了width和height属性使其占满box容器。同时，为实现遮罩层隐藏和显示效果，我们将overlay元素设置为绝对定位，其opacity属性初始值为0，表明初始状态下该元素是隐藏的，而在鼠标放上去时，opacity属性将被设置为1，表明遮罩层出现从而图片变暗。

第三步：使用jQuery实现鼠标放上去显示离开隐藏效果

接下来，我们需要使用jQuery来实现鼠标放上去显示离开隐藏效果的功能。代码如下：

$('.overlay').on('mouseenter', function() {
  $(this).stop().animate({ opacity: 1 }, 300);
}).on('mouseleave', function() {
  $(this).stop().animate({ opacity: 0 }, 300);
});

该代码使用了jQuery的mouseenter和mouseleave事件，分别表示鼠标进入和移出指定元素时触发的事件。当鼠标进入overlay元素时，我们使用animate()函数实现了遮罩层透明度从0变成1的动画效果。而在鼠标移出overlay元素时，我们同样使用animate()函数实现了遮罩层透明度从1变成0的动画效果。

至此，“jquery animate实现鼠标放上去显示离开隐藏效果”的攻略已经完成。下面是两个简单的示例：

示例1：实现图片放大效果

<div class="box">
  <img src="image.jpg">
  <div class="overlay"></div>
</div>

.box {
  position: relative;
  width: 200px;
  height: 200px;
  overflow: hidden;
}

.box img {
  width: 100%;
  height: 100%;
  display: block;
  transition: transform 0.3s ease-out;
}

.box:hover img {
  transform: scale(1.1);
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.overlay:hover {
  opacity: 1;
}

示例2：实现图片灰度滤镜效果

<div class="box">
  <img src="image.jpg">
  <div class="overlay"></div>
</div>

.box {
  position: relative;
  width: 200px;
  height: 200px;
}

.box img {
  width: 100%;
  height: 100%;
  display: block;
  filter: grayscale(100%);
  transition: filter 0.3s ease-out;
}

.box:hover img {
  filter: grayscale(0);
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.overlay:hover {
  opacity: 1;
}

这两个示例仅是鼠标放上去显示离开隐藏效果的简单应用，实际上该效果可以用于更多的应用场景中。