JQuery, JQuery ഉപയോഗിച്ച് നമുക്ക് എങ്ങനെ ഡൈനാമിക് ഇഫക്റ്റുകൾ നടപ്പിലാക്കാം

JQuery ഉപയോഗിച്ച് നിങ്ങൾക്ക് ഒരു HTML പേജിന്റെ ഘടകങ്ങളിൽ പ്രവർത്തിച്ചുകൊണ്ട് ഡൈനാമിക് ഇഫക്റ്റുകൾ, ആനിമേഷനുകൾ, ഫേഡുകൾ എന്നിവ സൃഷ്ടിക്കാൻ കഴിയും.

ആനിമേഷനുകൾ സൃഷ്ടിക്കുന്നതിന് വ്യത്യസ്തമായ JQuery രീതികൾ എങ്ങനെ ഉപയോഗിക്കാമെന്ന് ഈ ലേഖനത്തിൽ നമ്മൾ കാണും.

ഉള്ളടക്കം

ഒരു HTML ഘടകം മറയ്ക്കുകയും കാണിക്കുകയും ചെയ്യുക

രീതികൾ `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>

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 ഓപ്ഷണൽ പാരാമീറ്റർ ബൂളിയൻ സ്റ്റോപ്പ്ഓൾ, ക്യൂവിലുള്ള ആനിമേഷൻ നീക്കം ചെയ്യണോ വേണ്ടയോ എന്ന് വ്യക്തമാക്കുന്നു. പ്രി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 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

ടാഗുകൾ: jquery

28 ജനുവരി 2023 10:58 pm

തൊട്ടടുത്ത ലാറവെൽ: എന്താണ് ലാറവൽ കാഴ്ചകൾ »

മുമ്പത്തെ "വെരിമാട്രിക്സ് സെക്യുർ ഡെലിവറി പ്ലാറ്റ്ഫോം കോടിക്കണക്കിന് വീഡിയോ പ്രേക്ഷക ലൈസൻസുകൾ നൽകി അതിന്റെ ആദ്യ വർഷം അവസാനിപ്പിക്കുന്നു

സമീപകാല ലേഖനങ്ങൾ

കമ്യൂണികിട്ടി സ്റ്റാമ്പ

സംരക്ഷണം മുതൽ പ്രതികരണം, വീണ്ടെടുക്കൽ വരെ ransomware-നുള്ള ഏറ്റവും സമഗ്രമായ പിന്തുണ വീം അവതരിപ്പിക്കുന്നു

വീമിൻ്റെ Coveware സൈബർ കൊള്ളയടിക്കൽ സംഭവ പ്രതികരണ സേവനങ്ങൾ നൽകുന്നത് തുടരും. Coveware ഫോറൻസിക്‌സും പ്രതിവിധി കഴിവുകളും വാഗ്ദാനം ചെയ്യും…

ഏപ്രിൽ 29 ഏപ്രിൽ

ലേഖനങ്ങൾ

ഹരിതവും ഡിജിറ്റൽ വിപ്ലവവും: എങ്ങനെ പ്രവചനാത്മകമായ പരിപാലനം എണ്ണ, വാതക വ്യവസായത്തെ പരിവർത്തനം ചെയ്യുന്നു

പ്ലാൻ്റ് മാനേജ്‌മെൻ്റിന് നൂതനവും സജീവവുമായ സമീപനത്തിലൂടെ പ്രവചനാത്മക പരിപാലനം എണ്ണ, വാതക മേഖലയിൽ വിപ്ലവം സൃഷ്ടിക്കുന്നു.

ഏപ്രിൽ 29 ഏപ്രിൽ

ലേഖനങ്ങൾ

യുകെ ആൻ്റിട്രസ്റ്റ് റെഗുലേറ്റർ GenAI-യെ കുറിച്ച് ബിഗ്‌ടെക് അലാറം ഉയർത്തുന്നു

ആർട്ടിഫിഷ്യൽ ഇൻ്റലിജൻസ് വിപണിയിൽ ബിഗ് ടെക്കിൻ്റെ പെരുമാറ്റത്തെക്കുറിച്ച് യുകെ സിഎംഎ മുന്നറിയിപ്പ് നൽകിയിട്ടുണ്ട്. അവിടെ…

ഏപ്രിൽ 29 ഏപ്രിൽ

കമ്യൂണികിട്ടി സ്റ്റാമ്പ

കാസ ഗ്രീൻ: ഇറ്റലിയിൽ സുസ്ഥിരമായ ഭാവിക്കായി ഊർജ്ജ വിപ്ലവം

കെട്ടിടങ്ങളുടെ ഊർജ്ജ കാര്യക്ഷമത വർദ്ധിപ്പിക്കുന്നതിനായി യൂറോപ്യൻ യൂണിയൻ രൂപീകരിച്ച "ഗ്രീൻ ഹൗസ്" ഡിക്രി അതിൻ്റെ നിയമനിർമ്മാണ പ്രക്രിയ അവസാനിപ്പിച്ചു...

ഏപ്രിൽ 29 ഏപ്രിൽ

JQuery, JQuery ഉപയോഗിച്ച് നമുക്ക് എങ്ങനെ ഡൈനാമിക് ഇഫക്റ്റുകൾ നടപ്പിലാക്കാം

ഒരു HTML ഘടകം മറയ്ക്കുകയും കാണിക്കുകയും ചെയ്യുക

രീതികൾ hide() ഒപ്പം show()

ടോഗിൾ രീതി

jQuery ഫേഡ് ഇഫക്റ്റുകൾ

രീതികൾ fadeIn() e fadeOut()

മെതൊദൊ fadeToggle()

മെതൊദൊ fadeTo()

സ്ക്രോൾ ഇഫക്റ്റുകൾ

രീതികൾ slideUp() e slideDown()

മെതൊദൊ slideToggle()

ആനിമേഷൻ ഇഫക്റ്റുകൾ

മെതൊദൊ animate()

മെതൊദൊ stop()

തിരിച്ചുവിളിക്കുക

സമീപകാല ലേഖനങ്ങൾ

സംരക്ഷണം മുതൽ പ്രതികരണം, വീണ്ടെടുക്കൽ വരെ ransomware-നുള്ള ഏറ്റവും സമഗ്രമായ പിന്തുണ വീം അവതരിപ്പിക്കുന്നു

ഹരിതവും ഡിജിറ്റൽ വിപ്ലവവും: എങ്ങനെ പ്രവചനാത്മകമായ പരിപാലനം എണ്ണ, വാതക വ്യവസായത്തെ പരിവർത്തനം ചെയ്യുന്നു

യുകെ ആൻ്റിട്രസ്റ്റ് റെഗുലേറ്റർ GenAI-യെ കുറിച്ച് ബിഗ്‌ടെക് അലാറം ഉയർത്തുന്നു

കാസ ഗ്രീൻ: ഇറ്റലിയിൽ സുസ്ഥിരമായ ഭാവിക്കായി ഊർജ്ജ വിപ്ലവം

സമീപകാല ലേഖനങ്ങൾ

ടാഗ്

രീതികൾ `hide`() ഒപ്പം `show`()

രീതികൾ `fadeIn()` e `fadeOut()`

മെതൊദൊ `fadeToggle()`

മെതൊദൊ `fadeTo()`

രീതികൾ `slideUp()` e `slideDown()`

മെതൊദൊ `slideToggle()`

മെതൊദൊ `animate()`

മെതൊദൊ `stop()`