ಈ ಲೇಖನದಲ್ಲಿ ಅನಿಮೇಷನ್‌ಗಳನ್ನು ಉತ್ಪಾದಿಸಲು ವಿವಿಧ JQuery ವಿಧಾನಗಳನ್ನು ಹೇಗೆ ಬಳಸುವುದು ಎಂದು ನಾವು ನೋಡುತ್ತೇವೆ.
hide() ಮತ್ತು show()ಹೈಡ್ () ವಿಧಾನವು ಸರಳವಾಗಿ ಶೈಲಿಯ ಇನ್ಲೈನ್ ಅನ್ನು ಹೊಂದಿಸುತ್ತದೆ display: none ಆಯ್ದ ವಸ್ತುಗಳಿಗೆ. ವ್ಯತಿರಿಕ್ತವಾಗಿ, ಪ್ರದರ್ಶನ () ವಿಧಾನವು ಪ್ರದರ್ಶನ ಗುಣಲಕ್ಷಣಗಳನ್ನು ಮರುಸ್ಥಾಪಿಸುತ್ತದೆ.
ಒಂದು ಉದಾಹರಣೆಯನ್ನು ನೋಡೋಣ:
<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ಅನಿಮೇಟೆಡ್ ಗುಣಲಕ್ಷಣಗಳಿಗೆ ಸಂಬಂಧಿತ ಮೌಲ್ಯಗಳನ್ನು ನಿಶ್ ಮಾಡಿ. ಪೂರ್ವಪ್ರತ್ಯಯದೊಂದಿಗೆ ಮೌಲ್ಯವನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸಿದರೆ += 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>ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಹೇಳಿಕೆಗಳನ್ನು ಸಾಲಿನ ಮೂಲಕ ಕಾರ್ಯಗತಗೊಳಿಸಲಾಗುತ್ತದೆ. ಆದಾಗ್ಯೂ, 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
ನೌಕಾ ವಲಯವು ನಿಜವಾದ ಜಾಗತಿಕ ಆರ್ಥಿಕ ಶಕ್ತಿಯಾಗಿದೆ, ಇದು 150 ಶತಕೋಟಿ ಮಾರುಕಟ್ಟೆಯತ್ತ ನ್ಯಾವಿಗೇಟ್ ಮಾಡಿದೆ...
ಕಳೆದ ಸೋಮವಾರ, ಫೈನಾನ್ಶಿಯಲ್ ಟೈಮ್ಸ್ ಓಪನ್ ಎಐ ಜೊತೆ ಒಪ್ಪಂದವನ್ನು ಪ್ರಕಟಿಸಿತು. FT ತನ್ನ ವಿಶ್ವ ದರ್ಜೆಯ ಪತ್ರಿಕೋದ್ಯಮಕ್ಕೆ ಪರವಾನಗಿ ನೀಡುತ್ತದೆ…
ಲಕ್ಷಾಂತರ ಜನರು ಸ್ಟ್ರೀಮಿಂಗ್ ಸೇವೆಗಳಿಗೆ ಪಾವತಿಸುತ್ತಾರೆ, ಮಾಸಿಕ ಚಂದಾದಾರಿಕೆ ಶುಲ್ಕವನ್ನು ಪಾವತಿಸುತ್ತಾರೆ. ನೀವು ಎಂಬುದು ಸಾಮಾನ್ಯ ಅಭಿಪ್ರಾಯ…
Veeam ನಿಂದ Coveware ಸೈಬರ್ ಸುಲಿಗೆ ಘಟನೆಯ ಪ್ರತಿಕ್ರಿಯೆ ಸೇವೆಗಳನ್ನು ಒದಗಿಸುವುದನ್ನು ಮುಂದುವರಿಸುತ್ತದೆ. ಕೋವ್‌ವೇರ್ ಫೋರೆನ್ಸಿಕ್ಸ್ ಮತ್ತು ಪರಿಹಾರ ಸಾಮರ್ಥ್ಯಗಳನ್ನು ನೀಡುತ್ತದೆ…