JQuery ، كيف يمكننا تنفيذ التأثيرات الديناميكية باستخدام JQuery

باستخدام JQuery ، يمكنك إنشاء تأثيرات ديناميكية ورسوم متحركة وتلاشي من خلال العمل على عناصر صفحة HTML.

سنرى في هذه المقالة كيفية استخدام طرق JQuery المختلفة لإنشاء الرسوم المتحركة.

إخفاء وإظهار عنصر HTML

طرق hide() و show()

تقوم طريقة إخفاء () ببساطة بتعيين النمط المضمّن display: none للعناصر المحددة. على العكس من ذلك ، تستعيد طريقة show () خصائص العرض. 

دعنا نرى مثالا:

<script>
$(document).ready(function(){
    // Hide displayed paragraphs
    $(".hide-btn").click(function(){
        $("p").hide();
    });
    
    // Show hidden paragraphs
    $(".show-btn").click(function(){
        $("p").show();
    });
});
</script>

في الحالة الأولى ، يتم إخفاء الفقرة عند النقر فوق الزر (hide-btn) ، في الحالة الثانية ، تظهر الفقرة عند النقر فوق الزر (show-btn).

يمكنك أيضًا تحديد معلمة المدة ، لتحريك تأثير العرض والإخفاء لفترة من الوقت.

يمكن تحديد المدد باستخدام أحد السلاسل المسبقةdefiنيت 'slow' o 'fast'، أو في عدد من المللي ثانية ، لمزيد من الدقة ؛ تشير القيم الأعلى إلى رسوم متحركة أبطأ.

<script>
$(document).ready(function(){
    // Hide displayed paragraphs with different speeds
    $(".hide-btn").click(function(){
        $("p.normal").hide();
        $("p.fast").hide("fast");
        $("p.slow").hide("slow");
        $("p.very-fast").hide(50);
        $("p.very-slow").hide(2000);
    });
    
    // Show hidden paragraphs with different speeds
    $(".show-btn").click(function(){
        $("p.normal").show();
        $("p.fast").show("fast");
        $("p.slow").show("slow");
        $("p.very-fast").show(50);
        $("p.very-slow").show(2000);
    });
});
</script>

السلسلة قبلdefiنيتا 'fast' يشير إلى مدة 200 مللي ثانية ، بينما السلسلة 'slow' يشير إلى مدة 600 مللي ثانية.

يمكننا تحديد وظيفة callback ليتم تنفيذها بعد الانتهاء من الطريقة show() أو ديل hide()

<script>
$(document).ready(function(){
    // Display alert message after hiding paragraphs
    $(".hide-btn").click(function(){
        $("p").hide("slow", function(){
            // Code to be executed
            alert("The hide effect is completed.");
        });
    });
    
    // Display alert message after showing paragraphs
    $(".show-btn").click(function(){
        $("p").show("slow", function(){
            // Code to be executed
            alert("The show effect is completed.");
        });
    });
});
</script>

طريقة التبديل

طريقة jQuery toggle() إظهار أو إخفاء العناصر بطريقة إذا تم عرض العنصر في البداية ، فسيتم إخفاؤه ؛ على العكس من ذلك ، إذا كانت مخفية ، فسيتم عرضها (لتبديل الرؤية عمليًا).

<script>
$(document).ready(function(){
    // Toggles paragraphs display
    $(".toggle-btn").click(function(){
        $("p").toggle();
    });
});
</script>

وبالمثل ، يمكنك تحديد المعلمة duration عن الطريقة toggle()، بطريقة تحفز الانتقال بين الطرق المرئية والمخفية مثل الطرق show() e hide()

<script>
$(document).ready(function(){
    // Toggles paragraphs with different speeds
    $(".toggle-btn").click(function(){
        $("p.normal").toggle();
        $("p.fast").toggle("fast");
        $("p.slow").toggle("slow");
        $("p.very-fast").toggle(50);
        $("p.very-slow").toggle(2000);
    });
});
</script>

وبالمثل ، يمكنك أيضًا تحديد وظيفة callback عن الطريقة toggle().

<script>
$(document).ready(function(){
    // Display alert message after toggling paragraphs
    $(".toggle-btn").click(function(){
        $("p").toggle(1000, function(){
            // Code to be executed
            alert("The toggle effect is completed.");
        });
    });
});
</script>

آثار تتلاشى jQuery

طرق fadeIn() e fadeOut()

يمكنك استخدام طرق jQuery fadeIn()e fadeOut() لإظهار أو إخفاء عناصر HTML ، وزيادة عتامة هذه العناصر أو تقليلها تدريجيًا وإنشاء تأثير التلاشي.

<script>
$(document).ready(function(){
    // Fading out displayed paragraphs
    $(".out-btn").click(function(){
        $("p").fadeOut();
    });
    
    // Fading in hidden paragraphs
    $(".in-btn").click(function(){
        $("p").fadeIn();
    });
});
</script>

مثل طرق تأثيرات jQuery الأخرى ، يمكنك تحديد المدة أو معلمة السرعة للطرق اختياريًا fadeIn()e fadeOut()، من أجل التحكم في مدة الخبو. يمكن تحديد المدد باستخدام أحد السلاسل المسبقةdefiنيت 'slow' o 'fast'، أو في عدد من الألف من الثانية ؛ تشير القيم الأعلى إلى رسوم متحركة أبطأ.

<script>
$(document).ready(function(){
    // Fading out displayed paragraphs with different speeds
    $(".out-btn").click(function(){
        $("p.normal").fadeOut();
        $("p.fast").fadeOut("fast");
        $("p.slow").fadeOut("slow");
        $("p.very-fast").fadeOut(50);
        $("p.very-slow").fadeOut(2000);
    });
    
    // Fading in hidden paragraphs with different speeds
    $(".in-btn").click(function(){
        $("p.normal").fadeIn();
        $("p.fast").fadeIn("fast");
        $("p.slow").fadeIn("slow");
        $("p.very-fast").fadeIn(50);
        $("p.very-slow").fadeIn(2000);
    });
});
</script>

تأثير الأساليب fadeIn() / fadeOut() هو مشابه ل show() / hide()، ولكن على عكس الأساليب show() / hide()، الأول يحرك فقط عتامة العناصر المستهدفة ولا يحرك حجمها.

كما يمكنك تحديد وظيفة callback للتشغيل بعد اكتمال الطرق fadeIn() / fadeOut().

<script>
$(document).ready(function(){
    // Display alert message after fading out paragraphs
    $(".out-btn").click(function(){
        $("p").fadeOut("slow", function(){
            // Code to be executed
            alert("The fade-out effect is completed.");
        });
    });
    
    // Display alert message after fading in paragraphs
    $(".in-btn").click(function(){
        $("p").fadeIn("slow", function(){
            // Code to be executed
            alert("The fade-in effect is completed.");
        });
    });
});
</script>

طريقة fadeToggle()

طريقة jQuery fadeToggle() يعرض أو يخفي العناصر المحددة عن طريق تحريك عتامة هذه العناصر بحيث إذا تم عرض العنصر في البداية ، فسيختفي ؛ إذا كانت مخفية ، فسوف تتلاشى (أي تبديل تأثير التلاشي).

<script>
$(document).ready(function(){
    // Toggles paragraphs display with fading
    $(".toggle-btn").click(function(){
        $("p").fadeToggle();
    });
});
</script>

يمكنك أيضًا تحديد معلمة مدى الحياة للطريقة fadeToggle() أما بالنسبة للطرق fadeIn() / fadeOut()، للتحكم في مدة أو سرعة الرسوم المتحركة التي تتلاشى.

<script>
$(document).ready(function(){
    // Fade Toggles paragraphs with different speeds
    $(".toggle-btn").click(function(){
        $("p.normal").fadeToggle();
        $("p.fast").fadeToggle("fast");
        $("p.slow").fadeToggle("slow");
        $("p.very-fast").fadeToggle(50);
        $("p.very-slow").fadeToggle(2000);
    });
});
</script>

طريقة fadeToggle () لديها أيضًا القدرة على تحديد وظيفة callback.

<script>
$(document).ready(function(){
    // Display alert message after fade toggling paragraphs
    $(".toggle-btn").click(function(){
        $("p").fadeToggle(1000, function(){
            // Code to be executed
            alert("The fade-toggle effect is completed.");
        });
    });
});
</script>

طريقة fadeTo()

طريقة jQuery fadeTo() إنه مشابه للطريقة fadeIn()، ولكن على عكس الطريقة fadeIn()، طريقة fadeTo() يتيح لك مزج العناصر وصولاً إلى مستوى معين من التعتيم.

$(selector).fadeTo(speed, opacity, callback);

المعلمة المطلوبة opacity يحدد العتامة النهائية للعناصر المستهدفة والتي يمكن أن تكون رقمًا بين 0 و 1. المعلمة duration o speed وهو مطلوب أيضًا لهذه الطريقة التي تحدد مدة خبو الرسوم المتحركة.

<script>
$(document).ready(function(){
    // Fade to paragraphs with different opacity
    $(".to-btn").click(function(){
        $("p.none").fadeTo("fast", 0);
        $("p.partial").fadeTo("slow", 0.5);
        $("p.complete").fadeTo(2000, 1);
    });
});
</script>

تأثيرات التمرير

طرق slideUp() e slideDown()

طريقة jQuery slideUp() e slideDown() يتم استخدامها لإخفاء عناصر HTML أو إظهارها عن طريق تقليل أو زيادة ارتفاعها تدريجيًا (أي التمرير لأعلى أو لأسفل).

<script>
$(document).ready(function(){
    // Slide up displayed paragraphs
    $(".up-btn").click(function(){
        $("p").slideUp();
    });
    
    // Slide down hidden paragraphs
    $(".down-btn").click(function(){
        $("p").slideDown();
    });
});
</script>

مثل طرق تأثيرات jQuery الأخرى ، يمكنك تحديد المدة أو معامل السرعة للطرق اختياريًا slideUp() e slideDown() للتحكم في مدة الرسوم المتحركة للشرائح. يمكن تحديد المدد باستخدام أحد السلاسل المسبقةdefiنيت 'slow' o 'fast'، أو في عدد من الألف من الثانية ؛ تشير القيم الأعلى إلى رسوم متحركة أبطأ.

<script>
$(document).ready(function(){
    // Sliding up displayed paragraphs with different speeds
    $(".up-btn").click(function(){
        $("p.normal").slideUp();
        $("p.fast").slideUp("fast");
        $("p.slow").slideUp("slow");
        $("p.very-fast").slideUp(50);
        $("p.very-slow").slideUp(2000);
    });
    
    // Sliding down hidden paragraphs with different speeds
    $(".down-btn").click(function(){
        $("p.normal").slideDown();
        $("p.fast").slideDown("fast");
        $("p.slow").slideDown("slow");
        $("p.very-fast").slideDown(50);
        $("p.very-slow").slideDown(2000);
    });
});
</script>

يمكنك أيضًا تحديد وظيفة رد نداء ليتم تنفيذها بعد إكمال الطريقة slideUp() o slideDown().

<script>
$(document).ready(function(){
    // Display alert message after sliding up paragraphs
    $(".up-btn").click(function(){
        $("p").slideUp("slow", function(){
            // Code to be executed
            alert("The slide-up effect is completed.");
        });
    });
    
    // Display alert message after sliding down paragraphs
    $(".down-btn").click(function(){
        $("p").slideDown("slow", function(){
            // Code to be executed
            alert("The slide-down effect is completed.");
        });
    });
});
</script>

طريقة slideToggle()

طريقة jQuery slideToggle() إظهار العناصر المحددة أو إخفاؤها عن طريق تحريك ارتفاعها بحيث إذا تم عرض العنصر في البداية ، فسيتم تمريره لأعلى ؛ إذا كانت مخفية ، فسيتم تمريرها لأسفل ، أي التبديل بين الطرق slideUp() e slideDown().

<script>
$(document).ready(function(){
    // Toggles paragraphs display with sliding
    $(".toggle-btn").click(function(){
        $("p").slideToggle();
    });
});
</script>

وبالمثل ، يمكنك تحديد معلمة مدى الحياة للطريقة slideToggle() تأتي slideUp() e slideDown().

<script>
$(document).ready(function(){
    // Slide Toggles paragraphs with different speeds
    $(".toggle-btn").click(function(){
        $("p.normal").slideToggle();
        $("p.fast").slideToggle("fast");
        $("p.slow").slideToggle("slow");
        $("p.very-fast").slideToggle(50);
        $("p.very-slow").slideToggle(2000);
    });
});
</script>

وبالمثل ، يمكنك أيضًا تحديد وظيفة رد الاتصال للطريقة slideToggle().

<script>
$(document).ready(function(){
    // Display alert message after slide toggling paragraphs
    $(".toggle-btn").click(function(){
        $("p").slideToggle(1000, function(){
            // Code to be executed
            alert("The slide-toggle effect is completed.");
        });
    });
});
</script>

تأثيرات الرسوم المتحركة

طريقة animate()

طريقة jQuery animate() يتم استخدامه لإنشاء رسوم متحركة مخصصة. طريقة animate() يستخدم لتحريك خصائص CSS الرقمية ، مثل width, height, margin, padding, opacity, top, left إلخ. لكن الخصائص غير العددية مثل color o background-color لا يمكن تحريكها باستخدام وظائف jQuery الأساسية.

الصيغة الأساسية للطريقة animate() هو ما يلي:

$(selector).animate({ properties }, duration, callback);

معلمات الطريقة animate() لها المعاني التالية:

• معلمة الخصائص المطلوبة defiإنهاء خصائص CSS لتحريكها.
• تحدد معلمة المدة الاختيارية مدة تشغيل الرسوم المتحركة. يمكن تحديد المدد باستخدام أحد السلاسل المسبقةdefiنيت 'slow' o 'fast'، أو في عدد من الألف من الثانية ؛ تشير القيم الأعلى إلى رسوم متحركة أبطأ.
• معلمة رد الاتصال الاختيارية هي وظيفة يتم الاتصال بها بعد اكتمال الرسم المتحرك.

يوجد أدناه مثال بسيط للطريقة animate() الذي يحرك الصورة من موضعها الأصلي إلى اليمين بمقدار 300 بكسل عند النقر على الزر.

<script>
$(document).ready(function(){
    $("button").click(function(){
        $("img").animate({
            left: 300
        });
    });
});
</script>

يمكنك أيضًا تحريك خصائص متعددة لعنصر معًا مرة واحدة باستخدام الطريقة animate(). تم تحريك جميع الخصائص في نفس الوقت دون أي تأخير.

<script>
$(document).ready(function(){
    $("button").click(function(){
        $(".box").animate({
            width: "300px",
            height: "300px",
            marginLeft: "150px",
            borderWidth: "10px",
            opacity: 0.5
        });
    });
});
</script>

يمكنك أيضًا تحريك خصائص متعددة لعنصر واحدًا تلو الآخر على حدة ، في قائمة انتظار باستخدام وظيفة التسلسل في jQuery.

يُظهر المثال التالي رسم متحرك jQuery في قائمة الانتظار أو متسلسل ، حيث ستبدأ كل حركة بمجرد اكتمال الرسم المتحرك السابق على العنصر. سنرى وظيفة التسلسل في مقال مستقبلي.

<script>
$(document).ready(function(){
    $("button").click(function(){
        $(".box")
            .animate({width: "300px"})
            .animate({height: "300px"})
            .animate({marginLeft: "150px"})
            .animate({borderWidth: "10px"})
            .animate({opacity: 0.5});
    });
});
</script>

من الممكن أيضا defiنيش القيم النسبية للخصائص المتحركة. إذا تم تحديد قيمة ببادئة += o -=، يتم حساب القيمة المستهدفة عن طريق إضافة أو طرح الرقم المحدد من القيمة الحالية للممتلكات.

<script>
$(document).ready(function(){
    $("button").click(function(){
        $(".box").animate({            
            top: "+=50px",
            left: "+=50px",
            width: "+=50px",
            height: "+=50px"
        });
    });
});
</script>

بالإضافة إلى القيم الرقمية ، يمكن لكل خاصية قبول سلاسل 'show', 'hide' e 'toggle'. سيكون مفيدًا جدًا في الموقف الذي تريد فيه فقط تحريك العقار من قيمته الحالية إلى قيمته الأولية والعكس صحيح.

<script>
$(document).ready(function(){
    $("button").click(function(){
        $(".box").animate({
            width: 'toggle'
        });
    });
});
</script>

طريقة stop()

طريقة jQuery stop() يستخدم لإيقاف تشغيل الرسوم المتحركة لـ jQuery أو التأثيرات على العناصر المحددة قبل الإكمال.

الصيغة الأساسية للطريقة stop() يمكن إعطاء jQuery بـ:

$(selector).stop(stopAll, goToEnd);

المعامِلات الواردة في الصيغة أعلاه لها المعاني التالية:

• Il معلمة اختيارية منطقية stopAll، يحدد ما إذا كان سيتم إزالة الرسوم المتحركة في قائمة الانتظار أم لا. ما قبلdefiنيت هو false، هذا يعني أنه سيتم إيقاف الرسوم المتحركة الحالية فقط ، وسيتم تنفيذ بقية الرسوم المتحركة في قائمة الانتظار لاحقًا.
• المعامل المنطقي goToEnd اختياري يحدد ما إذا كان سيتم إكمال الرسم المتحرك الحالي على الفور. ما قبلdefiنيت هو false.

هنا مثال بسيط يوضح الطريقة stop() في فعل حقيقي حيث يمكنك بدء الرسوم المتحركة وإيقافها عند النقر على الزر.

<script>
$(document).ready(function(){
    // Start animation
    $(".start-btn").click(function(){
      $("img").animate({left: "+=150px"}, 2000);
    });
 
    // Stop running animation
    $(".stop-btn").click(function(){
      $("img").stop();
    });
    
    // Start animation in the opposite direction
    $(".back-btn").click(function(){
      $("img").animate({left: "-=150px"}, 2000);
    });
 
    // Reset to default
    $(".reset-btn").click(function(){
      $("img").animate({left: "0"}, "fast");
    });
});
</script>

فيما يلي مثال آخر لهذه الطريقة حيث إذا قمت بالنقر فوق الزر مرة أخرىSlide Toggle"بعد بدء الرسم المتحرك ولكن قبل اكتماله ، ستبدأ الحركة على الفور في الاتجاه المعاكس من نقطة البداية المحفوظة.

<script>
$(document).ready(function(){
    // Kill and toggle the current sliding animation
    $(".toggle-btn").on("click", function(){
        $(".box").stop().slideToggle(1000);
    });
});
</script>

أثناء إنشاء تأثير التمرير المتحرك ، فإن إحدى أكثر المشكلات شيوعًا التي قد تواجهها هي وضع العديد من الرسوم المتحركة في قائمة الانتظار ، عندما تقوم بوضع مؤشر الماوس وإزالته بسرعة. لماذا ، في هذه الحالة ، mouseenter ال mouseleave يتم تشغيل الأحداث بسرعة قبل اكتمال الرسوم المتحركة. لتجنب هذه المشكلة وإنشاء تأثير تمرير لطيف وسلس ، يمكنك إضافة stop(true, true)إلى سلسلة الطريقة ، مثل:

<script>
$(document).ready(function(){
    $(".box").hover(function(){
        $(this).find("img").stop(true, true).fadeOut();
    }, function(){
        $(this).find("img").stop(true, true).fadeIn();
    });
});
</script>

رد الاتصال

يتم تنفيذ عبارات JavaScript سطرًا بسطر. ومع ذلك ، نظرًا لأن تأثير jQuery يستغرق بعض الوقت للانتهاء ، فقد يتم تشغيل رمز السطر التالي بينما لا يزال التأثير السابق قيد التشغيل. لمنع حدوث ذلك ، يوفر jQuery وظيفة رد نداء لكل طريقة تأثير.

وظيفة رد الاتصال هي وظيفة يتم تشغيلها بمجرد اكتمال التأثير. يتم تمرير وظيفة رد الاتصال كوسيطة لطرق التأثير ، وعادة ما تظهر كوسيطة الطريقة الأخيرة. على سبيل المثال ، الصيغة الأساسية لطريقة تأثير jQuery slideToggle() مع وظيفة رد الاتصال التي يمكن تحديدها على النحو التالي:

$(selector).slideToggle(duration, callback);

تأمل المثال التالي حيث وضعنا البيانات slideToggle()e alert()واحد بجانب الآخر. إذا جربت هذا الرمز ، فسيظهر التنبيه فورًا بعد النقر فوق زر التبديل دون انتظار اكتمال تأثير تبديل الشريحة.

<script>
$(document).ready(function(){
    $("button").click(function(){
        $("p").slideToggle("slow");
        alert("The slide toggle effect has completed.");
    });   
});
</script>

وها هي النسخة المعدلة من المثال السابق حيث قمنا بإدخال البيان alert() داخل وظيفة رد الاتصال للطريقة slideToggle(). إذا جربت هذا الرمز ، فستظهر رسالة التحذير بمجرد اكتمال تأثير تبديل الشريحة.

<script>
$(document).ready(function(){
    $("button").click(function(){
        $("p").slideToggle("slow", function(){
            // Code to be executed once effect is complete
            alert("The slide toggle effect has completed.");
        });
    });   
});
</script>

وبالمثل ، يمكنك ذلك defiإنهاء وظائف رد الاتصال لطرق تأثير jQuery الأخرى ، مثل show(), hide(), fadeIn(), fadeOut(), animate()، الخ.

<script>
$(document).ready(function(){
    $("button").click(function(){
        $("h1, p").slideToggle("slow", function(){
            // Code to be executed once effect is complete
            alert("The slide toggle effect has completed.");
        });
    });   
});
</script>

إذا جربت نموذج الشفرة أعلاه ، فستتلقى نفس رسالة التحذير مرتين مرة واحدة لكل عنصر <h1> e <p>بعد الضغط على زر التفعيل.

BlogInnovazione.it