Question

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

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

 var imagearray=[document.getElementById("one"),document.getElementById("two"),document.getElementById("three")]

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

下面的HTML：

<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>

Answer 1

问题是您没有将悬停应用于任何事情。

$。每个回调都有两个参数，即给定数组上的迭代索引，然后是给定索引处的数组项。你需要将它传递给悬停。所以......

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

另外，你也没有将fadeIn / out应用于任何东西。在这种情况下， this 引用 $（item）返回的元素。

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

Answer 2

我认为你所追求的是下面的内容，你可以改变元素的不透明度

＆＃13;

$('.hover-set').hover(function() {
  $(this).fadeTo(500, 1);
}, function() {
  $(this).fadeTo(500, .5);
})

＆＃13;

<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>

＆＃13;

通过Jquery操作数组中的图像以淡入和淡出

2 个答案: