جی کوئری، چگونه می توانیم افکت های پویا را با جی کوئری پیاده سازی کنیم

با JQuery می‌توانید افکت‌های پویا، انیمیشن‌ها و محو شدن‌ها را با عمل بر روی عناصر یک صفحه HTML ایجاد کنید.

در این مقاله نحوه استفاده از روش های مختلف JQuery برای تولید انیمیشن را خواهیم دید.

یک عنصر HTML را پنهان و نمایش دهید

مواد و روش ها hide() و show()

متد hide() به سادگی استایل را به صورت درون خطی تنظیم می کند 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>

روش جابجایی

روش جی کوئری 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>

جلوه های محو شدن جی کوئری

مواد و روش ها fadeIn() e fadeOut()

می توانید از روش های جی کوئری استفاده کنید 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>

مانند سایر روش‌های جلوه‌های جی کوئری، می‌توانید به صورت اختیاری پارامتر مدت یا سرعت را برای متدها مشخص کنید 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()

روش جی کوئری 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()

روش جی کوئری 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()

روش جی کوئری 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>

مانند سایر روش‌های جلوه‌های جی کوئری، می‌توانید به صورت اختیاری پارامتر مدت یا سرعت را برای متدها مشخص کنید 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()

روش جی کوئری 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()

روش جی کوئری animate() برای ایجاد انیمیشن های سفارشی استفاده می شود. روش animate() برای متحرک سازی خصوصیات CSS عددی، مانند width, height, margin, padding, opacity, top, left و غیره. اما خواص غیر عددی مانند color o background-color آنها را نمی توان با استفاده از عملکرد پایه جی کوئری متحرک کرد.

نحو اصلی روش 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مقادیر نسبی nish برای ویژگی های متحرک. اگر مقداری با پیشوند مشخص شود += 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()

روش جی کوئری stop() برای توقف اجرای فعلی انیمیشن‌ها یا افکت‌های جی کوئری بر روی عناصر انتخابی قبل از تکمیل استفاده می‌شود.

نحو اصلی روش stop() jQuery را می توان با:

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

پارامترهای موجود در نحو فوق دارای معانی زیر هستند:

• Il پارامتر بولی اختیاری stopAll، مشخص می کند که انیمیشن در صف حذف شود یا نه. پیشdefinite است false، این بدان معنی است که فقط انیمیشن فعلی متوقف می شود ، بقیه انیمیشن های موجود در صف بعداً اجرا می شوند.
• پارامتر بولی goToEnd اختیاری مشخص می کند که آیا انیمیشن فعلی بلافاصله تکمیل شود یا خیر. پیشdefinite است 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>

تماس لطفا

دستورات جاوا اسکریپت خط به خط اجرا می شوند. با این حال، از آنجایی که پایان افکت جی کوئری مدتی طول می کشد، کد خط بعدی ممکن است در حالی اجرا شود که افکت قبلی هنوز در حال اجرا است. برای جلوگیری از این اتفاق، jQuery برای هر متد افکت یک تابع callback ارائه می دهد.

تابع callback تابعی است که پس از تکمیل افکت اجرا می شود. تابع callback به عنوان یک آرگومان به متدهای افکت ارسال می شود و آنها معمولاً به عنوان آخرین آرگومان متد ظاهر می شوند. به عنوان مثال، سینتکس اولیه روش افکت جی کوئری slideToggle() با یک تابع callback که می تواند به صورت زیر مشخص شود:

$(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() داخل یک تابع callback برای متد 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توابع پاسخ تماس nite برای سایر روش های اثر جی کوئری، مانند 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