通过 Jquery 操作数组中的图像以在悬停时淡入淡出

Manipulating Images in Array to fadein and out on hover via Jquery

本文关键字：悬停 淡出 淡入 图像 操作 Jquery 操作数 数组 通过      更新时间：2023-09-26

我正在尝试引用一个图像数组，每次用户将鼠标悬停在数组中的图像上时，图像都会淡入。当用户的鼠标离开图像时，图像将淡出。

我编写的代码如下，但似乎不起作用。请帮忙

 var imagearray=[document.getElementById("one"),document.getElementById("two"),document.getElementById("three")]
$.each(imagrarray,function(){
 $.hover(function(){ $.fadeIn("slow");},function(){ $.fadeOut();
 });  });

下面的网页：

<div id="faces" style=" overflow-y:hidden;  height:120px; display:inline-block; left: 20px ; position:relative; opacity:0.5" >
<div id="base" class="hidden" >
<li class=set1" style="display:inline;">
<img id="one" style="float:left" src="attachments/36508133/one.png?api=v2" height="100"width="52" /> 
<img id="two" style="float:left" src="attachments/36508133/two.png?api=v2" height="100"width="52"/>
<img id="three" style="float:left" src="attachments/36508133/three.png?api=v2" height="100" width="52"/> 
</li></div></div>

问题是您没有将悬停应用于任何内容。

$.each 回调有两个参数，给定数组的迭代索引，然后是给定索引处的数组项。您需要传递此内容才能悬停。所以。。。

$.each(imagrarray,function(index, item){
 $(item).hover(function(){ $(this).fadeIn("slow");},function(){ $(this).fadeOut();
 });  });

此外，您也没有将淡入/淡出应用于任何内容。在这种情况下，这是指 $（item） 返回的元素。

也就是说，代码可以重构，正如你在 Arun 的 jsfiddle 中看到的那样。

我认为你所追求的是如下所示的东西，您可以在其中更改元素的不透明度

$('.hover-set').hover(function() {
  $(this).fadeTo(500, 1);
}, function() {
  $(this).fadeTo(500, .5);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="faces" style=" overflow-y:hidden;  height:120px; display:inline-block; left: 20px ; position:relative; opacity:0.5">
  <div id="base" class="hidden">
    <li class="set1" style="display:inline;">
      <img id="one" class="hover-set" style="float:left" src="//placehold.it/64?text=1" height="100" width="52" />
      <img id="two" class="hover-set" style="float:left" src="//placehold.it/64?text=2" height="100" width="52" />
      <img id="three" class="hover-set" style="float:left" src="//placehold.it/64?text=3" height="100" width="52" />
    </li>
  </div>
</div>

相关文章：