JQuery၊ JQuery ဖြင့် ပြောင်းလဲနေသောအကျိုးသက်ရောက်မှုများကို မည်သို့အကောင်အထည်ဖော်နိုင်မည်နည်း။

JQuery ဖြင့် သင်သည် HTML စာမျက်နှာ၏ အစိတ်အပိုင်းများကို လုပ်ဆောင်ခြင်းဖြင့် ရွေ့လျားသက်ရောက်မှုများ၊

ဤဆောင်းပါးတွင် ကာတွန်းဖန်တီးခြင်းအတွက် မတူညီသော JQuery နည်းလမ်းများကို မည်သို့အသုံးပြုရမည်ကို ကျွန်ုပ်တို့ မြင်တွေ့ရမည်ဖြစ်သည်။

HTML အစိတ်အပိုင်းတစ်ခုကို ဖျောက်ပြီး ပြပါ။

နည်းလမ်းများ hide() နှင့် show()

hide() method သည် style inline ကို ရိုးရိုးရှင်းရှင်း သတ်မှတ်ပေးသည်။ display: none ရွေးချယ်ထားသောအရာများအတွက်။ အပြန်အလှန်အားဖြင့် show() method သည် display properties ကို ပြန်ပေးသည်။ 

ဥပမာတစ်ခုကြည့်ရအောင်။

<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).

ပြသမှုကို သက်ဝင်လှုပ်ရှားစေပြီး အကျိုးသက်ရောက်မှုကို အချိန်အတိုင်းအတာတစ်ခုအထိ ဖျောက်ထားရန် ကြာချိန် ကန့်သတ်ချက်ကိုလည်း သတ်မှတ်နိုင်သည်။

pre strings များထဲမှ တစ်ခုကို အသုံးပြု၍ ကြာချိန်များကို သတ်မှတ်နိုင်ပါသည်။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>

ကြိုးတစ်ချောင်းကြိုdefinita 'fast' string သည် 200 milliseconds ကြာချိန်ကို ညွှန်ပြသည်။ 'slow' ကြာချိန် 600 မီလီစက္ကန့်ကို ညွှန်ပြသည်။

function တစ်ခု သတ်မှတ်နိုင်ပါတယ်။ 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>

အလားတူပင်၊ သင်သည် parameter ကိုသတ်မှတ်နိုင်သည်။ 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()ကြာချိန်ကို ထိန်းထားနိုင်မှ ပျောက်အောင်၊ pre strings များထဲမှ တစ်ခုကို အသုံးပြု၍ ကြာချိန်များကို သတ်မှတ်နိုင်ပါသည်။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>

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() 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() slide animation ၏ကြာချိန်ကို ထိန်းချုပ်ရန်။ pre strings များထဲမှ တစ်ခုကို အသုံးပြု၍ ကြာချိန်များကို သတ်မှတ်နိုင်ပါသည်။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>

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

အလားတူ၊ နည်းလမ်းအတွက် callback function ကိုလည်း သင် သတ်မှတ်နိုင်ပါသည်။ 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 စသည်တို့ ဒါပေမယ့် ဂဏန်းမဟုတ်တဲ့ ဂုဏ်သတ္တိတွေကို ကြိုက်တယ်။ color o background-color အခြေခံ jQuery လုပ်ဆောင်နိုင်စွမ်းကို အသုံးပြု၍ ၎င်းတို့ကို လှုပ်ရှား၍မရပါ။

နည်းလမ်း၏အခြေခံအထားအသို animate() ၎င်းမှာ အောက်ပါအတိုင်းဖြစ်သည်

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

နည်းလမ်းဘောင်များ animate() အောက်ပါအဓိပ္ပါယ်များရှိသည်။

• လိုအပ်သော ဂုဏ်သတ္တိများ ကန့်သတ်ချက် defiလှုပ်ရှားရန် CSS ဂုဏ်သတ္တိများကို အပြီးသတ်ပါ။
• ရွေးချယ်နိုင်သော ကြာချိန် ကန့်သတ်ချက်သည် ကာတွန်းရုပ်ပြမှု မည်မျှကြာကြာ လုပ်ဆောင်မည်ကို သတ်မှတ်ပေးသည်။ pre strings များထဲမှ တစ်ခုကို အသုံးပြု၍ ကြာချိန်များကို သတ်မှတ်နိုင်ပါသည်။defiကိုး 'slow' o 'fast'သို့မဟုတ် မီလီစက္ကန့်များစွာ၊ မြင့်မားသောတန်ဖိုးများသည် နှေးကွေးသော ကာတွန်းများကို ညွှန်ပြသည်။
• ရွေးချယ်နိုင်သော ဖုန်းခေါ်ဆိုမှု ကန့်သတ်ချက်သည် ကာတွန်းရုပ်ပြမှုပြီးမြောက်ပြီးနောက် ခေါ်ဆိုရန် လုပ်ဆောင်ချက်တစ်ခုဖြစ်သည်။

အောက်တွင် ရိုးရှင်းသော နည်းလမ်းကို ဥပမာပေးထားပါသည်။ animate() ပုံတစ်ပုံကို ၎င်း၏မူရင်းအနေအထားမှ ညာဘက်သို့ 300 pixels ဖြင့် ခလုတ်နှိပ်၍ လှုပ်ရှားပေးသည်။

<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>

ဂဏန်းတန်ဖိုးများအပြင်၊ ပစ္စည်းတစ်ခုစီသည် strings များကို လက်ခံနိုင်သည်။ 'show', 'hide' e '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)method chain သို့၊

<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 effect သည် ပြီးရန် အချိန်အနည်းငယ်ကြာသောကြောင့်၊ ယခင်အကျိုးသက်ရောက်မှု ဆက်လက်လုပ်ဆောင်နေချိန်တွင် နောက်စာကြောင်း၏ကုဒ်သည် အလုပ်လုပ်နိုင်မည်ဖြစ်သည်။ ဒီလိုမဖြစ်အောင် jQuery သည် effect method တစ်ခုစီအတွက် callback function ကို ပေးပါသည်။

ပြန်ခေါ်သည့် လုပ်ဆောင်ချက်သည် အကျိုးသက်ရောက်မှု ပြီးသွားသည်နှင့် လုပ်ဆောင်သည့် လုပ်ဆောင်ချက်တစ်ခု ဖြစ်သည်။ ပြန်ခေါ်ခြင်းလုပ်ဆောင်ချက်ကို အကျိုးသက်ရောက်မှု၏နည်းလမ်းများထံ အကြောင်းပြချက်တစ်ခုအဖြစ် ပေးပို့ပြီး ၎င်းတို့သည် များသောအားဖြင့် နောက်ဆုံးနည်းလမ်းအငြင်းအခုံအဖြစ် ပေါ်လာသည်။ ဥပမာအားဖြင့်၊ jQuery effect method ၏ အခြေခံ syntax ဖြစ်သည်။ slideToggle() အောက်ပါအတိုင်းသတ်မှတ်နိုင်သော callback function ဖြင့်

$(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() နည်းလမ်းအတွက် callback function တစ်ခုအတွင်း 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>activate ခလုတ်ကိုနှိပ်ပြီးနောက်၊

BlogInnovazione.it