ആനിമേഷനുകൾ സൃഷ്ടിക്കുന്നതിന് വ്യത്യസ്തമായ 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>
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
കളറിംഗ് വഴി മികച്ച മോട്ടോർ കഴിവുകൾ വികസിപ്പിക്കുന്നത് എഴുത്ത് പോലെയുള്ള കൂടുതൽ സങ്കീർണ്ണമായ കഴിവുകൾക്ക് കുട്ടികളെ സജ്ജമാക്കുന്നു. നിറം കൊടുക്കാൻ...
നാവിക മേഖല ഒരു യഥാർത്ഥ ആഗോള സാമ്പത്തിക ശക്തിയാണ്, അത് 150 ബില്യൺ വിപണിയിലേക്ക് നാവിഗേറ്റ് ചെയ്തു...
കഴിഞ്ഞ തിങ്കളാഴ്ച, ഫിനാൻഷ്യൽ ടൈംസ് ഓപ്പൺഎഐയുമായി ഒരു കരാർ പ്രഖ്യാപിച്ചു. FT അതിൻ്റെ ലോകോത്തര പത്രപ്രവർത്തനത്തിന് ലൈസൻസ് നൽകുന്നു…
ദശലക്ഷക്കണക്കിന് ആളുകൾ സ്ട്രീമിംഗ് സേവനങ്ങൾക്കായി പണമടയ്ക്കുന്നു, പ്രതിമാസ സബ്സ്ക്രിപ്ഷൻ ഫീസ് നൽകുന്നു. നിങ്ങൾ എന്നത് പൊതുവായ അഭിപ്രായമാണ്...