ලිපි

JQuery, JQuery සමඟ ගතික බලපෑම් ක්‍රියාත්මක කරන්නේ කෙසේද?

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''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()fadeOut()

ඔබට jQuery ක්රම භාවිතා කළ හැකිය fadeIn()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()fadeOut(), වියැකී යාමේ කාලසීමාව පාලනය කිරීම සඳහා. පූර්ව තන්තු වලින් එකක් භාවිතයෙන් කාලසීමාවන් නියම කළ හැකdefiනයිට් 'slow''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>
Metodo 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>
Metodo 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()slideDown()

jQuery ක්රමය slideUp()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()slideDown() විනිවිදක සජීවිකරණයේ කාලසීමාව පාලනය කිරීමට. පූර්ව තන්තු වලින් එකක් භාවිතයෙන් කාලසීමාවන් නියම කළ හැකdefiනයිට් 'slow''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()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>
Metodo slideToggle()

jQuery ක්රමය slideToggle() තෝරාගත් මූලද්‍රව්‍ය ඒවායේ උස සජීවිකරණය කිරීමෙන් පෙන්වන්න හෝ සඟවන්න එවිට මූලද්‍රව්‍යය මුලින් දර්ශනය වන්නේ නම්, එය ඉහළට අනුචලනය වනු ඇත; සඟවා ඇත්නම්, එය පහළට අනුචලනය වනු ඇත, එනම් ක්‍රම අතර ටොගල් වේ slideUp() e slideDown().

<script>
$(document).ready(function(){
    // Toggles paragraphs display with sliding
    $(".toggle-btn").click(function(){
        $("p").slideToggle();
    });
});
</script>

ඒ හා සමානව, ඔබට ක්‍රමය සඳහා ආයුකාල පරාමිතිය නියම කළ හැකිය slideToggle() කෙසේ slideUp()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>

සජීවිකරණ බලපෑම්

Metodo animate()

jQuery ක්රමය animate() එය අභිරුචි සජීවිකරණ නිර්මාණය කිරීමට භාවිතා කරයි. ක්රමය animate() වැනි සංඛ්‍යාත්මක CSS ගුණාංග සජීවීකරණය කිරීමට භාවිතා කරයි width, height, margin, padding, opacity, top, left ආදිය නමුත් වැනි සංඛ්‍යාත්මක නොවන ගුණාංග colorbackground-color මූලික jQuery ක්‍රියාකාරීත්වය භාවිතයෙන් ඒවා සජීවිකරණය කළ නොහැක.

ක්‍රමයේ මූලික සින්ටැක්ස් animate() එය පහත දැක්වේ:

$(selector).animate({ properties }, duration, callback);

ක්රම පරාමිතීන් animate() පහත අර්ථයන් ඇත:

  • අවශ්ය ගුණාංග පරාමිතිය defiසජීවීකරණය කිරීමට CSS ගුණාංග අවසන් කරන්න.
  • විකල්ප කාල පරාමිතිය සජීවිකරණය කොපමණ කාලයක් ක්‍රියාත්මක වේද යන්න නියම කරයි. පූර්ව තන්තු වලින් එකක් භාවිතයෙන් කාලසීමාවන් නියම කළ හැකdefiනයිට් 'slow''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's concatenation ශ්‍රිතය භාවිතයෙන් පෝලිමක තනි තනිව මූලද්‍රව්‍යයක බහුවිධ ගුණාංග සජීවීකරණය කළ හැක.

පහත උදාහරණය පෝලිම්ගත හෝ දාම සහිත jQuery සජීවිකරණයක් පෙන්වයි, එහිදී එක් එක් සජීවිකරණය මූලද්‍රව්‍යයේ පෙර සජීවිකරණය සම්පූර්ණ වූ පසු ආරම්භ වේ. අපි concatenation function එක ඉදිරි ලිපියකින් බලමු.

<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''toggle'. දේපල එහි වත්මන් වටිනාකමේ සිට එහි ආරම්භක අගය දක්වා සහ අනෙක් අතට සජීවීකරණය කිරීමට ඔබට අවශ්‍ය වන අවස්ථාවක එය ඉතා ප්‍රයෝජනවත් වනු ඇත.

<script>
$(document).ready(function(){
    $("button").click(function(){
        $(".box").animate({
            width: 'toggle'
        });
    });
});
</script>
Metodo stop()

jQuery ක්රමය stop() දැනට ධාවනය වන jQuery සජීවිකරණ හෝ සම්පූර්ණ කිරීමට පෙර තෝරාගත් අයිතම මත බලපෑම් නැවැත්වීමට භාවිතා කරයි.

ක්‍රමයේ මූලික සින්ටැක්ස් stop() jQuery ලබා දිය හැක්කේ:

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

ඉහත වාක්‍ය ඛණ්ඩයේ ඇති පරාමිතිවලට පහත අර්ථයන් ඇත:

  • Il විකල්ප පරාමිතිය boolean stopAll, පෝලිම් සජීවිකරණය ඉවත් කළ යුතුද නැද්ද යන්න සඳහන් කරයි. පෙරdefiනයිට් වේ false, මෙයින් අදහස් කරන්නේ වත්මන් සජීවිකරණය පමණක් නවත්වන බවයි, පෝලිමේ ඇති ඉතිරි සජීවිකරණ පසුව ක්‍රියාත්මක වනු ඇත.
  • boolean පරාමිතිය 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>

callback

JavaScript ප්‍රකාශයන් පේළියෙන් පේළියට ක්‍රියාත්මක වේ. කෙසේ වෙතත්, jQuery ආචරණය අවසන් වීමට යම් කාලයක් ගත වන බැවින්, පෙර ප්‍රයෝගය ක්‍රියාත්මක වන විට ඊළඟ පේළියේ කේතය ක්‍රියාත්මක විය හැක. මෙය සිදුවීම වලක්වා ගැනීම සඳහා, jQuery එක් එක් ප්‍රයෝග ක්‍රමය සඳහා ආපසු ඇමතුම් ශ්‍රිතයක් සපයයි.

ආපසු ඇමතුම් ශ්‍රිතයක් යනු බලපෑම සම්පූර්ණ වූ පසු ක්‍රියාත්මක වන ශ්‍රිතයකි. ආපසු කැඳවීමේ ශ්‍රිතය ආචරණයේ ක්‍රම සඳහා තර්කයක් ලෙස ලබා දෙන අතර, ඒවා සාමාන්‍යයෙන් අවසාන ක්‍රම තර්කය ලෙස දිස්වේ. උදාහරණයක් ලෙස, jQuery ප්‍රයෝග ක්‍රමයේ මූලික සින්ටැක්ස් slideToggle() පහත පරිදි සඳහන් කළ හැකි ආපසු කැඳවීමේ කාර්යයක් සමඟ:

$(selector).slideToggle(duration, callback);

අපි ප්‍රකාශ තබා ඇති පහත උදාහරණය සලකා බලන්න slideToggle()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><p>, Activate බොත්තම මත ක්ලික් කිරීමෙන් පසු.

BlogInnovazione.it

නවෝත්පාදන පුවත් පත්‍රිකාව
නවෝත්පාදනය පිළිබඳ වැදගත්ම පුවත් අතපසු නොකරන්න. ඒවා විද්‍යුත් තැපෑලෙන් ලබා ගැනීමට ලියාපදිංචි වන්න.
tags: jquery

මෑතකාලීන ලිපි

ළමුන් සඳහා පිටු වර්ණ ගැන්වීමේ ප්‍රතිලාභ - සියලුම වයස් කාණ්ඩ සඳහා මැජික් ලෝකයක්

වර්ණ ගැන්වීම හරහා සියුම් මෝටර් කුසලතා වර්ධනය කිරීම ලිවීම වැනි වඩාත් සංකීර්ණ කුසලතා සඳහා දරුවන් සූදානම් කරයි. වර්ණ ගැන්වීමට...

2 මැයි 2024

අනාගතය මෙන්න: නැව් කර්මාන්තය ගෝලීය ආර්ථිකය විප්ලවීය කරන්නේ කෙසේද?

නාවික අංශය සැබෑ ගෝලීය ආර්ථික බලවතෙකු වන අතර එය බිලියන 150 ක වෙළඳපලක් කරා ගමන් කර ඇත.

1 මැයි 2024

ප්‍රකාශකයින් සහ OpenAI කෘත්‍රිම බුද්ධිය මගින් සැකසූ තොරතුරු ගලායාම නියාමනය කිරීමට ගිවිසුම් අත්සන් කරයි

පසුගිය සඳුදා ෆිනෑන්ෂල් ටයිම්ස් OpenAI සමඟ ගිවිසුමක් නිවේදනය කළේය. FT එහි ලෝක මට්ටමේ පුවත්පත් කලාවට බලපත්‍ර ලබා දෙයි…

30 අප්රේල් 2024

මාර්ගගත ගෙවීම්: ප්‍රවාහ සේවා ඔබව සදහටම ගෙවන ආකාරය මෙන්න

මිලියන ගණනක් ජනතාව ප්‍රවාහ සේවා සඳහා ගෙවයි, මාසික දායක ගාස්තු ගෙවයි. පොදු මතය වන්නේ ඔබ...

29 අප්රේල් 2024

ඔබේ භාෂාවෙන් නවෝත්පාදනය කියවන්න

නවෝත්පාදන පුවත් පත්‍රිකාව
නවෝත්පාදනය පිළිබඳ වැදගත්ම පුවත් අතපසු නොකරන්න. ඒවා විද්‍යුත් තැපෑලෙන් ලබා ගැනීමට ලියාපදිංචි වන්න.

පසු අපට