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>
...

如您所见，它已经包含样式 (class="photoBlob")，背景是透明的，直到鼠标悬停时，背景变为灰色。

我需要刷新的特定 DIV 来自查询字符串 (photos.asp?photoID=1047)。我所说的“闪光”是将 DIV 的背景更改为彩色 (#19426E)，然后在 2 秒后将该颜色淡化回透明。

如果有一个要刷新的 DIV 并且我知道要刷新的 DIV ID，我可能可以解决这个问题，但是来自查询字符串，我不知道我在做什么。如果有任何建议、示例或片段帮助我开始这方面的工作，我将不胜感激。我想我找到了用于闪烁元素的 JQuery 插件，但即便如此，我如何使用我的查询字符串“photoID”来提供该插件，我的 JS 显然是垃圾！

非常感谢

我的回答 - 感谢（150PoundsOfDonamite）

我实际上犯了一个错误，我的div的id不是来自查询字符串，它来自URL的锚点/哈希部分。因此，感谢已接受的答案（如下），我成功地完成了这项工作 - 看起来很不错！

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

您可以使用这个 Jquery 彩色动画插件来做到这一点。当然，这是假设您使用的是 Jquery。如果您的 JavaScript 技能没有您想要的那么强，那么 jQuery 是一个很好的起点。不要误会我的意思，它不能替代学习纯 JavaScript，但它可以为你做很多事情。

彩色动画基于 John Resig 的彩色动画插件，但添加了 rgba 支持，因此您可以获得透明度。您还可以设置文本和边框颜色的动画。

为了从查询字符串中获取照片ID，您可以使用这样的函数（我在SO 此处），但我个人发现，当我想在 namedef（默认）参数很有用。代码> 不是在查询字符串中找到：

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);
    }
});