주어진 시간이 지나면 div를 멋지게 만들어

StackOverflow https://stackoverflow.com/questions/124166

  •  02-07-2019
  •  | 
  •  

문제

가장 좋은 방법은 무엇입니까? <div> 주어진 시간이 지나면 사라져 (일부 JavaScript 라이브러리를 사용하지 않고).

나는 브라우저로 보내질 거대한 JavaScript 라이브러리가 필요하지 않은 매우 가벼운 솔루션을 찾고 있습니다.

도움이 되었습니까?

해결책

왜 당신이 jQuery와 같은 것을 사용하는지 확실하지 않아,이 효과를 사소한 결과로 만들 수 있지만, 본질적으로, 당신은 일련의 변화를 -moz -opacity, 불투명도 및 필터로 마무리해야합니다 : Alpha CSS Rules. settimeout ()에서.

또는 jQuery를 사용하고 settimeout에서 fadeout () 호출을 랩핑하십시오. 당신의 선택.

다른 팁

다음은 JavaScript가 있습니다. JavaScript 튜토리얼 웹 사이트에서 어딘가 (다시 찾을 수 없었던)에서 찾아서 수정했습니다.

var TimeToFade = 200.0;

function fade(eid)
{
    var element = document.getElementById(eid);
    if(element == null) return;

    if(element.FadeState == null)
    {
        if(element.style.opacity == null || element.style.opacity == ''
               || element.style.opacity == '1') {
            element.FadeState = 2;
        } else {
            element.FadeState = -2;
        }
    }

    if(element.FadeState == 1 || element.FadeState == -1) {
        element.FadeState = element.FadeState == 1 ? -1 : 1;
        element.FadeTimeLeft = TimeToFade - element.FadeTimeLeft;
    } else {
        element.FadeState = element.FadeState == 2 ? -1 : 1;
        element.FadeTimeLeft = TimeToFade;
        setTimeout("animateFade(" + new Date().getTime()
           + ",'" + eid + "')", 33);
    }
}

function animateFade(lastTick, eid)
{
    var curTick = new Date().getTime();
    var elapsedTicks = curTick - lastTick;

    var element = document.getElementById(eid);

    if(element.FadeTimeLeft <= elapsedTicks) {
        element.style.opacity = element.FadeState == 1 ? '1' : '0';
        element.style.filter = 'alpha(opacity = '
            + (element.FadeState == 1 ? '100' : '0') + ')';
        element.FadeState = element.FadeState == 1 ? 2 : -2;
        element.style.display = "none";
        return;
    }

    element.FadeTimeLeft -= elapsedTicks;
    var newOpVal = element.FadeTimeLeft/TimeToFade;
    if(element.FadeState == 1) {
        newOpVal = 1 - newOpVal;
    }

    element.style.opacity = newOpVal;
    element.style.filter = 'alpha(opacity = ' + (newOpVal*100) + ')';

    setTimeout("animateFade(" + curTick + ",'" + eid + "')", 33);
}

다음 HTML은 작동 방식을 보여줍니다.

<html><head>
    <script type="text/javascript" src="fade.js"></script>
</head><body>
    <div id="fademe" onclick="fade( 'fademe' )">
        <p>This will fade when you click it</p>
    </div>
</body></html>

요즘 나는 항상이를 위해 도서관을 사용할 것입니다. 그들이 한 진전은 경이 롭고 크로스 브라우저 기능만으로도 그만한 가치가 있습니다. 따라서이 대답은 대답이 아닙니다. jQuery가 모두 15KB임을 지적하고 싶습니다.

초기 시간과 함께 Settimeout을 사용하여 페이드 루틴을 트리거 한 다음 낮은 타이머와 함께 설정 타임 아웃을 사용하여 이미지가 사라질 때까지 이미지의 불투명도 레벨을 통과하십시오.

그러나 jQuery는 약 15K로 내려갈 수 있으며 클라이언트를위한 일회성 다운로드이므로 거대하지 않습니다.

Yui (Yahoo User Interface) 애니메이션 라이브러리를 사용해보십시오 : http://developer.yahoo.com/yui/animation/

바퀴를 재발 명하지 마십시오. 도서관은 우리의 친구입니다. :-)

나는 당신이 도서관을 사용하고 있다는 것을 알고 있지만 moo.fx를 살펴 보는 것이 좋습니다. http://moofx.mad4milk.net/ - 3K 같다고 생각합니다.

jQuery도 꽤 작습니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top