ਇਸ ਲੇਖ ਵਿੱਚ ਅਸੀਂ ਦੇਖਾਂਗੇ ਕਿ ਐਨੀਮੇਸ਼ਨ ਬਣਾਉਣ ਲਈ ਵੱਖ-ਵੱਖ JQuery ਢੰਗਾਂ ਦੀ ਵਰਤੋਂ ਕਿਵੇਂ ਕਰਨੀ ਹੈ।
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>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>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() ਹੇਠ ਲਿਖੇ ਅਰਥ ਹਨ:
'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()jQuery ਵਿਧੀ stop() ਵਰਤਮਾਨ ਵਿੱਚ ਚੱਲ ਰਹੇ jQuery ਐਨੀਮੇਸ਼ਨਾਂ ਜਾਂ ਮੁਕੰਮਲ ਹੋਣ ਤੋਂ ਪਹਿਲਾਂ ਚੁਣੇ ਹੋਏ ਤੱਤਾਂ 'ਤੇ ਪ੍ਰਭਾਵਾਂ ਨੂੰ ਰੋਕਣ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ।
ਵਿਧੀ ਦਾ ਮੂਲ ਸੰਟੈਕਸ stop() jQuery ਨਾਲ ਦਿੱਤਾ ਜਾ ਸਕਦਾ ਹੈ:
$(selector).stop(stopAll, goToEnd);ਉਪਰੋਕਤ ਸੰਟੈਕਸ ਵਿੱਚ ਪੈਰਾਮੀਟਰਾਂ ਦੇ ਹੇਠਾਂ ਦਿੱਤੇ ਅਰਥ ਹਨ:
false, ਇਸਦਾ ਮਤਲਬ ਹੈ ਕਿ ਸਿਰਫ ਮੌਜੂਦਾ ਐਨੀਮੇਸ਼ਨ ਨੂੰ ਰੋਕਿਆ ਜਾਵੇਗਾ, ਕਤਾਰ ਵਿੱਚ ਬਾਕੀ ਐਨੀਮੇਸ਼ਨਾਂ ਨੂੰ ਬਾਅਦ ਵਿੱਚ ਚਲਾਇਆ ਜਾਵੇਗਾ।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 gli 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
ਪਿਛਲੇ ਸੋਮਵਾਰ, ਫਾਈਨੈਂਸ਼ੀਅਲ ਟਾਈਮਜ਼ ਨੇ ਓਪਨਏਆਈ ਨਾਲ ਇੱਕ ਸੌਦੇ ਦਾ ਐਲਾਨ ਕੀਤਾ। FT ਆਪਣੀ ਵਿਸ਼ਵ ਪੱਧਰੀ ਪੱਤਰਕਾਰੀ ਨੂੰ ਲਾਇਸੰਸ ਦਿੰਦਾ ਹੈ...
ਲੱਖਾਂ ਲੋਕ ਸਟ੍ਰੀਮਿੰਗ ਸੇਵਾਵਾਂ ਲਈ ਭੁਗਤਾਨ ਕਰਦੇ ਹਨ, ਮਹੀਨਾਵਾਰ ਗਾਹਕੀ ਫੀਸ ਅਦਾ ਕਰਦੇ ਹਨ। ਇਹ ਆਮ ਰਾਏ ਹੈ ਕਿ ਤੁਸੀਂ…
Veeam ਦੁਆਰਾ Coveware ਸਾਈਬਰ ਜ਼ਬਰਦਸਤੀ ਘਟਨਾ ਪ੍ਰਤੀਕਿਰਿਆ ਸੇਵਾਵਾਂ ਪ੍ਰਦਾਨ ਕਰਨਾ ਜਾਰੀ ਰੱਖੇਗਾ। ਕੋਵਵੇਅਰ ਫੋਰੈਂਸਿਕ ਅਤੇ ਉਪਚਾਰ ਸਮਰੱਥਾਵਾਂ ਦੀ ਪੇਸ਼ਕਸ਼ ਕਰੇਗਾ...
ਪੂਰਵ-ਅਨੁਮਾਨਤ ਰੱਖ-ਰਖਾਅ ਪਲਾਂਟ ਪ੍ਰਬੰਧਨ ਲਈ ਇੱਕ ਨਵੀਨਤਾਕਾਰੀ ਅਤੇ ਕਿਰਿਆਸ਼ੀਲ ਪਹੁੰਚ ਦੇ ਨਾਲ, ਤੇਲ ਅਤੇ ਗੈਸ ਸੈਕਟਰ ਵਿੱਚ ਕ੍ਰਾਂਤੀ ਲਿਆ ਰਹੀ ਹੈ।…