التلاشي للداخل والتلاشي باستخدام JavaScript وCSS

يمكن أن يؤدي إنشاء تأثيرات التلاشي والتلاشي لعناصر HTML إلى تحسين الجاذبية البصرية لتطبيقات الويب. ومع ذلك، يمكن أن يكون تنفيذ هذه التأثيرات أمرًا صعبًا في بعض الأحيان، خاصة عندما لا تعمل وظيفة التلاشي بشكل صحيح.

في التنفيذ السابق، لم تكن وظيفة التلاشي تزيد من عتامة العنصر كما هو متوقع. وبدلا من ذلك، ظل عالقا عند 0.1. لمعالجة هذه المشكلة، نقدم طريقة أكثر فعالية:

function unfade(element) {
    var op = 0.1;  // initial opacity
    element.style.display = 'block';
    var timer = setInterval(function () {
        if (op >= 1) { // If opacity reaches 1
            clearInterval(timer);
        }
        element.style.opacity = op;
        element.style.filter = 'alpha(opacity='   op * 100   ")";
        op  = op * 0.1;
    }, 10);
}

تبدأ هذه الوظيفة بعتامة أولية تبلغ 0.1 وتزيدها تدريجيًا حتى تصل إلى 1.0، مما يؤدي إلى تأثير التلاشي السلس.

للتلاشي، نستبدل الكود أعلاه مع:

function fade(element) {
    var op = 1;  // initial opacity
    var timer = setInterval(function () {
        if (op 
تعمل هذه الوظيفة على تقليل العتامة بشكل مستمر حتى تصل إلى 0.1، ثم تقوم بإخفاء العنصر لإنشاء تأثير التلاشي المطلوب.
تذكر أنه من الضروري تجنب استخدام السلاسل كوسيطات لـ setInterval أو setTimeout بسبب المخاطر الأمنية المحتملة.