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, очевидно, мусор!

Большое спасибо

МОЙ ОТВЕТ - Спасибо (150 фунтов за донамит)

Я на самом деле допустил ошибку, идентификатор моего div не был получен из строки запроса, он исходил из якорной / хеш-части 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

Вот цветовой фейдер, лицензия Creative Commons.
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, но оно многое для вас делает.

Цветовая анимация, основанная на плагине цветовой анимации Джона Резига, но добавляет поддержку rgba, чтобы вы могли иметь свою прозрачность. Вы также можете анимировать текст и границы цветов.

Чтобы получить идентификатор фотографии из строки запроса, вы можете использовать функцию, подобную этой (которую я нашел в SO здесь ), но я лично считаю аргумент 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);
        });
    }
});

Обновление после комментария:

Получение вашего фотоидентификатора после # еще проще (вам, конечно, не понадобится функция 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);
    }
});