操縱數組中的圖像以淡入淡出並通過Jquery懸停

我想引用圖像數組，每次用戶將鼠標懸停在數組中的圖像上時，圖像都會淡入。當用戶的鼠標離開時，圖像淡出圖片。操縱數組中的圖像以淡入淡出並通過Jquery懸停

我寫的代碼如下，但它似乎不工作。請幫助

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>

來源

2016-02-29 user3121688

的不透明度，如果你淡出圖像，你可以分享的HTML以及 –

，那麼你將如何再次徘徊 –

嗯..每當我將鼠標移動到圖像上時，它會消失，當我移出時，它會消失 – user3121688

問題是，你不申請懸停到任何東西。

$。每個回調函數有兩個參數，它們是給定數組上的迭代索引，然後是給定索引處的數組項。你需要通過這個來盤旋。所以...

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

另外，你並沒有將fadeIn/out應用於任何東西。在這種情況下，這個是指由$（item）返回的元素。

也就是說，代碼可以重構，你可以在Arun的jsfiddle中看到。

來源

2016-02-29 04:22:04 jimmying

我覺得你以後有什麼是一樣的東西下面，在這裏你更改的元素

$('.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>

來源

2016-02-29 06:18:08

操縱數組中的圖像以淡入淡出並通過Jquery懸停

回答

相關問題