javascript動畫不透明度更改的錯誤行爲

我有一個頁面上有幾個圖像。當用戶懸停在任何一張圖片上時，我想讓一個50％的不透明覆蓋圖淡入，並且關於圖片懸停的信息將會消失。下面是我在PHP剛纔的代碼（我已經刪除了字符串concats等，方便閱讀）：javascript動畫不透明度更改的錯誤行爲

<div class="propertyoverlay" 
    id="boxnum'.$propertynumber.'" 
    onMouseOver="fadein(\'boxnum'.$propertynumber.'\')" 
    onMouseOut="fadeout(\'boxnum'.$propertynumber.'\')" 
>'; 
    <h3 class="price">'.$properties[$propertynumber]['price'].'</h3>'; 
</div>';

其中在喂DIV ID下面的命令：

function fadein(id){   
    $('#'+id).animate({ 'opacity': 0.5 }); 
} 

function fadeout(id){   
    $('#'+id).animate({ 'opacity': 0 }); 
}

我遇到的問題是：答：如果用戶在圖像上反覆快速移動，則淡入淡出命令會堆疊起來。如果mouseOver和mouseOut命令在被調用時立即覆蓋了其餘的cue，那將會更好。 B.當我將鼠標懸停在嵌套在父級內部的H3標籤上時，會直接調用mouseOut，然後使用鼠標懸停命令，導致div淡出，然後再次淡入。

我很高興使用Javascript或JQuery來解決這個問題，但是，如果可能的話，寧願暫時避免使用基於CSS3的解決方案。非常感謝你花時間陪伴！

來源

2013-01-22 Kaizen9001

爲什麼在問題實際上是他們編寫的代碼時，ppl總是會假定JS不正確的行爲？ ;-) –

我的意思是不正確的方式，它沒有做我想做的事......我認爲我的代碼是問題。這就是爲什麼我在這裏尋求幫助，而不是向JS抱怨。 – Kaizen9001

我知道，人們用這樣的方式來描述他們的問題/困難，這聽起來好像語言是問題，而不是他們的代碼...... –

答：調用動畫，例如之前使用jQuery的.stop（）方法：

$('#'+id).stop(true).animate({ 'opacity': 0 });

B：嘗試使用jQuery中的mouseenter和mouseleave事件（docs）。這將解決觸發mouseover/mouseout的子元素的問題。這意味着您必須將事件與jQuery綁定，但不是直接在HTML元素上。

來源

2013-01-22 10:12:14 Felix

公平的停止點（true，true）。 – Felix

這是現貨（停止（真實）修正）。感謝您的時間！ – Kaizen9001

只有當您排列多個動畫以便一個接一個地執行時，才需要第一個true。在這種情況下，它表示如果整個隊列將被取消（true）或僅當前處理的動畫（false）。當你只排隊一個動畫時，沒關係。 – Philipp

你一個元素上開始新的.animate操作之前，調用.stop() 功能停止目前仍在進行中的任何動畫。

這樣，當fadein操作完成之前調用fadeout函數時，它將從它已達到的不透明度值中褪去0.0不透明度。

來源

2013-01-22 10:10:37 Philipp

我還沒有測試過，但我認爲.stop()是你需要的！在official api documention閱讀更多關於它的信息！

來源

2013-01-22 10:10:43

javascript動畫不透明度更改的錯誤行爲

回答

相關問題