مقالات

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 milliseconds جي مدت جي نشاندهي ڪري ٿو، جڏهن ته string '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(), fade جي مدت کي ڪنٽرول ڪرڻ لاء. مدت اڳي اسٽرنگ مان ھڪڙي استعمال ڪندي بيان ڪري سگھجن ٿيون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() هيٺيون معنائون آهن:

گھربل پراپرٽيز پيٽرول defiCSS ملڪيتن کي متحرڪ ڪرڻ لاءِ ختم ڪريو.
اختياري مدت جو پيٽرول بيان ڪري ٿو ته اينيميشن ڪيتري وقت تائين هلندي. مدت اڳي اسٽرنگ مان ھڪڙي استعمال ڪندي بيان ڪري سگھجن ٿيون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، ان جو مطلب اهو آهي ته صرف موجوده اينيميشن کي روڪيو ويندو، قطار ۾ باقي اينيميشن کي بعد ۾ عمل ڪيو ويندو.
boolean parameter 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 جي 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

جاوا اسڪرپٽ بيانن تي عمل ڪيو ويو آهي لائن طرفان. جڏهن ته، جيئن ته 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 پي ايم

اڳيون Laravel: Laravel نظارا ڇا آهن »

ترجيح ڏني Verimatrix Secure Delivery پليٽ فارم پنهنجو پهريون سال بند ڪري ٿو اربين لائسنسن سان في وڊيو سامعين جي خدمت ۾

تازيون مضمونون

مقالات

ٻارن لاءِ رنگين صفحن جا فائدا - سڀني عمرن لاءِ جادوءَ جي دنيا

رنگ سازي ذريعي سٺي موٽر صلاحيتن کي ترقي ڪرڻ ٻارن کي وڌيڪ پيچيده صلاحيتن لاء تيار ڪري ٿو جهڙوڪ لکڻ. رنگ ڏيڻ…

2 2024

مقالات

مستقبل هتي آهي: ڪيئن شپنگ انڊسٽري عالمي معيشت ۾ انقلاب آڻيندي آهي

بحري شعبي هڪ حقيقي عالمي معاشي طاقت آهي، جيڪا 150 بلين مارڪيٽ جي طرف نيويگيٽ ڪئي آهي ...

1 2024

مقالات

پبلشرز ۽ OpenAI مصنوعي ذهانت پاران پروسيس ڪيل معلومات جي وهڪري کي منظم ڪرڻ لاءِ معاهدن تي دستخط ڪن ٿا

گذريل سومر، فنانشل ٽائمز OpenAI سان هڪ ڊيل جو اعلان ڪيو. ايف ٽي پنهنجي عالمي سطح جي صحافت کي لائسنس ڏئي ٿو ...

30 اپريل 2024

مقالات

آن لائين ادائگيون: ھتي آھي ڪيئن اسٽريمنگ سروسز توھان کي ھميشه لاءِ ادا ڪنديون آھن

لکين ماڻهو ادا ڪن ٿا اسٽريمنگ سروسز لاءِ، ادا ڪندا مھينا سبسڪرپشن فيس. اها عام راءِ آهي ته توهان…

29 اپريل 2024

JQuery، اسان JQuery سان متحرڪ اثرات ڪيئن لاڳو ڪري سگھون ٿا

JQuery سان توهان هڪ HTML صفحي جي عناصر تي عمل ڪندي متحرڪ اثرات، متحرڪ ۽ فيڊ ٺاهي سگهو ٿا.

HTML عنصر لڪايو ۽ ڏيکاريو

طريقا hide() ۽ show()

ڦيرائڻ جو طريقو

jQuery فيڊ اثرات

طريقا fadeIn() e fadeOut()

جو طريقو fadeToggle()

جو طريقو fadeTo()

اسڪرول اثرات

طريقا slideUp() e slideDown()

جو طريقو slideToggle()

انيميشن اثرات

جو طريقو animate()

جو طريقو stop()

callback

تازيون مضمونون

ٻارن لاءِ رنگين صفحن جا فائدا - سڀني عمرن لاءِ جادوءَ جي دنيا

مستقبل هتي آهي: ڪيئن شپنگ انڊسٽري عالمي معيشت ۾ انقلاب آڻيندي آهي

پبلشرز ۽ OpenAI مصنوعي ذهانت پاران پروسيس ڪيل معلومات جي وهڪري کي منظم ڪرڻ لاءِ معاهدن تي دستخط ڪن ٿا

آن لائين ادائگيون: ھتي آھي ڪيئن اسٽريمنگ سروسز توھان کي ھميشه لاءِ ادا ڪنديون آھن

تازيون مضمونون

ڳولهي

طريقا `hide`() ۽ `show`()

طريقا `fadeIn()` e `fadeOut()`

جو طريقو `fadeToggle()`

جو طريقو `fadeTo()`

طريقا `slideUp()` e `slideDown()`

جو طريقو `slideToggle()`

جو طريقو `animate()`

جو طريقو `stop()`