Question

在StackOverflow网站上，您会注意到左上角的“通知”指示。当有人回复您的问题/答案时，您单击通知并指示您进行该特定回复，然后显示橙色背景并慢慢变为白色，以告知您正在查看的回复。我想知道如何实现这种淡化方法。

我想要闪现的元素是div。下面是我的DIVS如何安排，因为它们是由ASP动态生成的：

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

正如您所看到的，它已经包含样式（class =“photoBlob”），背景在鼠标悬停时是透明的，当它变为灰色时。

我需要闪存的特定DIV来自查询字符串（photos.asp？photoID = 1047）。闪光的意思是将DIV的背景改为颜色（＃19426E），然后在2秒后将该颜色淡化为透明。

如果有一个DIV要闪存并且我知道DIV ID要闪存，我可能会解决它，但是来自查询字符串，我不知道我在做什么。我会很感激任何建议，例子或片段让我开始这个。我想我找到了用于闪存元素的JQuery插件，但即便如此，如何使用我的查询字符串'photoID'来提供该插件，我的JS显然是垃圾！

非常感谢

我的回答 - 感谢（150PoundsOfDonamite）

我实际上犯了一个错误，我的div的id不是来自查询字符串，而是来自URL的anchor / hash部分。所以，由于接受了答案（下面），我设法让这个工作 - 看起来很棒！

我添加了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

这是一个色彩推子，创意公共许可证 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);
}

Answer 2

您可以使用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);
    }
});

JQuery / JS / ASP - 使一个元素（div）像StackOverflow一样淡出

2 个答案: