JQuery/JS/ASP - 使元素（div）像StackOverflow一樣褪色

Question

在StackOverflow網站上，您會注意到左上角的「通知」指示符。當有人回覆你的問題/答案時，你點擊通知，它會引導你回覆那個特定的回覆，然後顯示一個橙色背景，然後慢慢變成白色，讓你知道你在看哪個回覆。我想知道如何實現這種淡入淡出的方法。

我想要刷新的元素是div。下面是我DIVS如何安排，因爲它們是動態的ASP生產：

... 
<div id="1046" class="photoBlob">........</div> 
<div id="1047" class="photoBlob">........</div> 
<div id="1048" class="photoBlob">........</div> 
... 

正如你可以看到，它已經包含樣式（類=「photoBlob」），背景是透明的，直到鼠標懸停，當它變成灰色。

我需要刷新的特定DIV來自查詢字符串（photos.asp？photoID = 1047）。我的意思是說，將DIV的背景改爲彩色（＃19426E），然後在2秒後將該顏色淡化爲透明。

我大概可以解決這個問題，如果有一個DIV閃爍，並且我知道DIV ID閃爍，但來自查詢字符串，我不知道我在做什麼。我會很感激任何建議，例子或片段讓我開始這個。我想我發現了用於閃爍元素的JQuery插件，但即使如此，我如何使用查詢字符串'photoID'來提供該插件，我的JS顯然是垃圾！

非常感謝

我的回答 - 感謝（150PoundsOfDonamite）

其實我犯了一個錯誤，我的DIV的id是不是從查詢字符串來了，它是從錨來/散列部的網址。所以感謝接受的答案（下面），我設法讓這個工作 - 看起來是商業！

我加了jQuery插件：http://www.bitstorm.org/jquery/color-animation/

我加入這個jQuery/JavaScript的：

$(document).ready(function() { 
    var flashDiv = window.location.hash; 

    if(flashDiv!==false) { 
     setTimeout(function() { 
      $(flashDiv).animate({backgroundColor: '#19426E'}, 2000); 
      $(flashDiv).animate({backgroundColor: 'rgba(0,0,0,0)'}, 2000); 
     }, 1000); 
    } 
}); 

Answer 1

你可以做，使用this Jquery color animation plugin。當然，這是假設你正在使用Jquery。如果你的JavaScript技能不如你想的那麼強大，jQuery是一個很好的開始。不要誤解我的意思，它不能替代學習純JavaScript，但它爲你做了很多事情。

基於John Resig的彩色動畫插件的彩色動畫，但增加了rgba支持，因此您可以獲得透明度。您還可以設置文字和邊框顏色的動畫效果。

爲了從查詢字符串中獲取照片ID，可以使用這樣的功能（我在SO here中找到了這個功能），但是我個人發現def（默認）參數有用，當我想設置返回值時自動name沒有在查詢字符串中發現：

function getParameterByName(name, def) { 
    name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]"); 
    var regexS = "[\\?&]" + name + "=([^&#]*)", 
     regex = new RegExp(regexS), 
     results = regex.exec(window.location.href); 

    if(results == null) 
     return def; 
    else 
     return decodeURIComponent(results[1].replace(/\+/g, " ")); 
} 

把那只是在腳本標籤的任何地方。然後獲取參數並將其閃爍，將其放在需要的地方（例如，head標籤）。在這裏，我假設你想在documentReady（當頁面的DOM元素被加載時）做到這一點，但你也可以稍微延遲它，或者等到懸停或其他事件。：

$(document).ready(function() { 
    var flashDiv = getParameterByName("photoID", false); 

    if(flashDiv!==false) { 
     $("#"+flashDiv).animate({backgroundColor: '#19426E'}, 2000); 
     $("#"+flashDiv).animate({backgroundColor: 'rgba(0,0,0,0)'}, 2000); 
    } 
}); 

如果您想推遲那2秒後在頁面加載：

$(document).ready(function() { 
    var flashDiv = getParameterByName("photoID", false); 

    if(flashDiv!==false) { 
     setTimeout(function() { 
      $("#"+flashDiv).animate({backgroundColor: '#19426E'}, 2000); 
      $("#"+flashDiv).animate({backgroundColor: 'rgba(0,0,0,0)'}, 2000); 
     }, 2000); 
    } 
}); 

如果你想等到用戶將鼠標移動到那個（但只有一次） ：評論後

$(document).ready(function() { 
    var flashDiv = getParameterByName("photoID", false); 

    if(flashDiv!==false && !flashed) { 
     $("#"+flashDiv).one("mouseover", function() { 
      $(this).animate({backgroundColor: '#19426E'}, 2000); 
      $(this).animate({backgroundColor: 'rgba(0,0,0,0)'}, 2000); 
     }); 
    } 
}); 

更新：

獲取在＃後您的PHOTOID更容易（你會不會需要的getParameterByName功能，當然）：

$(document).ready(function() { 
    var photoId = document.location.href.split("#")[1]; 

    if(photoId!==undefined) { 
     $("#"+photoId).animate({backgroundColor: '#19426E'}, 2000); 
     $("#"+photoId).animate({backgroundColor: 'rgba(0,0,0,0)'}, 2000); 
    } 
}); 

Answer 2

這裏的顏色漸變，創作共用許可證。
http://www.scriptiny.com/2008/05/javascript-color-fading-script/

我改進了該代碼以支持透明度。

工作演示： http://jsbin.com/eceriv

不需要jQuery的，或MooTools的或任何其他框架。

在代碼中有趣的部分是這樣的：

// incrementally close the gap between the two colors 
function animateColor(element,property) { 
    var i, rgb, fadeState = element.fadeState; 
    if (fadeState.step <= fadeState.nSteps) { 
     for (i=0; i<3; i++) { 
      fadeState.currentColor[i] = Math.round(fadeState.currentColor[i] + fadeState.delta[i]); 
     } 
     // transparency is a float; must not round 
     fadeState.currentColor[3] = fadeState.currentColor[3] + fadeState.delta[3]; 
     rgb = rgbaToString(fadeState.currentColor); 
     element.style[property] = rgb; 
     fadeState.step++; 
    } 
    else { 
     clearInterval(fadeState.timer); 
     rgb = rgbaToString(fadeState.endColor); 
     element.style[property] = rgb; 
     delete element.fadeState; 
    } 
} 


function colorFade(id,colorProperty,start,end,nSteps,interval) { 
    var delta = [], i,rgb, startColor, 
     element = document.getElementById(id), 
     fadeState = element.fadeState || {}; 
    nSteps = nSteps || 20; 
    interval = interval || 20; 
    if (fadeState.timer) { 
     clearInterval(fadeState.timer); 
    } 
    element.fadeState = fadeState; 
    startColor = hexToRgbaArray(start); 
    fadeState.endColor = hexToRgbaArray(end); 
    for (i=0; i<4; i++){ 
     delta[i] = (fadeState.endColor[i]-startColor[i])/nSteps; 
    } 

    element.style[colorProperty] = rgbaToString(startColor); 
    fadeState.currentColor = startColor; 
    fadeState.delta = delta; 
    fadeState.step = 1; // init 
    fadeState.nSteps = nSteps; 
    fadeState.timer = setInterval(function() { 
     animateColor(element,colorProperty); 
    }, interval); 
}