اجعل div يتلاشى بشكل جيد بعد فترة زمنية معينة

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

  •  02-07-2019
  •  | 
  •  

سؤال

ما هي أفضل طريقة لصنع <div> تتلاشى بعد فترة زمنية معينة (دون استخدام بعض مكتبات JavaScript المتاحة).

أنا أبحث عن حل خفيف الوزن للغاية ولا يتطلب إرسال مكتبة JavaScript ضخمة إلى المتصفح.

هل كانت مفيدة؟

المحلول

لست متأكدًا من سبب معارضتك لاستخدام شيء مثل jQuery، والذي من شأنه أن يجعل تحقيق هذا التأثير أمرًا تافهًا، ولكن في الأساس، تحتاج إلى تغليف سلسلة من التغييرات على -moz-opacity، وopacity، وfilter:alpha CSS القواعد في setTimeout ().

أو استخدم jQuery وقم بلف استدعاء FadeOut() في setTimeout.اختيارك.

نصائح أخرى

وهنا بعض جافا سكريبت الذي يفعل ذلك.لقد وجدته على موقع ويب تعليمي لجافا سكريبت في مكان ما (والذي لم أتمكن من العثور عليه مرة أخرى) وقمت بتعديله.

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 يبلغ 15 كيلو بايت.

استخدم setTimeout مع الوقت الأولي لتشغيل روتين التلاشي ثم استخدم setTimeout مع مؤقت منخفض للتنقل عبر مستوى عتامة الصورة حتى تختفي.

ومع ذلك، يمكن أن ينخفض ​​حجم jQuery إلى حوالي 15 كيلو بايت ويتم تنزيله مرة واحدة للعميل، لذا لا يمكنني أن أسميه ضخمًا.

جرب مكتبة الرسوم المتحركة YUI (واجهة مستخدم Yahoo): http://developer.yahoo.com/yui/animation/

لا تعيد اختراع العجلة.المكتبات هي أصدقائنا.:-)

أعلم أنك لا تستخدم المكتبات، ولكنني أوصي بإلقاء نظرة على moo.fx: http://moofx.mad4milk.net/ - أعتقد أنه مثل 3K.

jQuery صغير جدًا أيضًا.

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top