Javascript div基於位置褪色

我想點擊一個div並讓它和其他div一個接一個地淡出。我想要一個div衰落和下一個div衰落之間的時間與div之間的距離成正比。Javascript div基於位置褪色

所有這些divs都是較大div的孩子。

我有淡入淡出的代碼。我現在正在嘗試編寫一個函數，它會查看父div的寬度的每個像素，並在遇到它們時淡化所有div。

這裏是JavaScript：

function sweep(){ 
    var n3_position = #note_3.position(); 
    for (i=0;i<900;i++){ 
     if n3_position.left == i { 
      fade('note_3'); 
     } 
    } 
} 
function fade(el){ 
    setTimeout(function(){ 
     $(el).fadeOut("slow",function(){ 
      document.getElmentById(el).style.display="none"; 
     }); 
    }, 100); 
}

下面是相關HTML：

<a onclick="sweep()"><div id="note_1"></div></a>

所以，點擊第一個音符（的div是音符）將導致第三個音符淡出一次for循環變量i等於第三個音符左側的x位置。最終，sweep（）會爲所有div位置創建變量並檢查它們中的每一個，但現在，爲了測試，它就是這個。父div是900px寬，所以這是for循環的上限的原因。

現在發生的事情是什麼都沒有。

所有幫助表示讚賞。提前感謝您的專家幫助。

-Oijl

來源

2012-08-09 Oijl

您的代碼存在一些問題。起初你會調用'fade（'note_3'）'，但是在你有'$（el）'的淡入淡出函數中，由於缺少id選擇符'＃'，這將不起作用。 – 2012-08-09 18:36:46

我覺得你的第一個函數有一些錯誤。嘗試下面的內容，看看它是否適合你。

function sweep(){ 
    var n3_position = document.getElementById('note_3').offsetLeft; 
    for (i=0;i<900;i++){ 
     if (n3_position == i) { 
      fade('note_3'); 
     } 
    } 
}

你在循環中的if條件中缺少括號。此外，＃note_3不返回元素，因爲它無效。

此外，第二個函數中還有一些錯誤。這裏是什麼，應該努力讓你開始：

function fade(el){ 
    setTimeout(function(){ 
     $('#' + el).fadeOut("slow"); 
    }, 100); 
}

你失蹤了「＃」，您將需要因爲你是通過標識引用的元素。此外，您可能不需要將顯示樣式更改爲無，因爲fadeOut方法正在爲您處理此問題。

來源

2012-08-09 18:42:48 robbieAreBest

謝謝。我實際上最終使用了一個更簡單的解決方案，但是你用一些語法幫助了我。 – Oijl 2012-08-15 01:15:40

Javascript div基於位置褪色

回答

相關問題