JQuery/JS/ASP - 요소 (div)가 StackOverflow처럼 흐려 지도록 만듭니다.

Question

StackOverflow 웹 사이트에서 왼쪽 상단에 '알림'표시기가 나타납니다. 누군가가 귀하의 질문/답변에 응답하면 알림을 클릭하고 특정 회신으로 안내 한 다음 주황색 배경으로 표시하고 천천히 흰색으로 희미 해져보고있는 답글을 알려줍니다. 이 페이드 방법을 어떻게 달성 할 수 있는지 알고 싶습니다.

내가 플래시하고 싶은 요소는 div입니다. 다음은 그들이 동적으로 ASP에 의해 생산되는 나의 div를 배열하는 방법이다 : 당신이 볼 수 있듯이

이

... 
<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가 쿼리 문자열에서 오는되지 않았다 덕분에, 그것은 앵커에서오고/해시 부분 URL의 그래서 답변 (아래)을 받아 들여 덕분에이 작업을 할 수있었습니다. 당신은 this Jquery color animation plugin를 사용하는 것을 할 수

$(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

: 다음이 JQuery와/자바 스크립트를 추가 http://www.bitstorm.org/jquery/color-animation/

:

는 내가 jQuery 플러그인을 추가했습니다. 물론 Jquery를 사용한다고 가정합니다. 자바 스크립트 기술이 원하는만큼 강력하지 않으면 jQuery를 시작하는 것이 좋습니다. 나를 잘못하지 마라. 순수한 자바 스크립트를 배우기위한 대체품이 아니지만, 많은 일을 해준다.

John Resig의 컬러 애니메이션 플러그인을 기반으로하는 컬러 애니메이션이지만 rgba 지원이 추가되어 투명성을 확보 할 수 있습니다. 텍스트와 테두리 색상을 애니메이션으로 나타낼 수도 있습니다.

쿼리 문자열에서 사진 ID를 얻으려면 다음과 같은 함수를 사용할 수 있습니다 (나는 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) { 
     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) { 
     $("#"+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 && !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); 
}