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

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 लक्ष्य तत्वहरूको अन्तिम अस्पष्टता निर्दिष्ट गर्दछ जुन ० र १ बीचको संख्या हुन सक्छ। प्यारामिटर 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>

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>

त्यस्तै, तपाइँ विधिको लागि कलब्याक प्रकार्य पनि निर्दिष्ट गर्न सक्नुहुन्छ 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 गुणहरू समाप्त गर्नुहोस्।
• ऐच्छिक अवधि प्यारामिटरले एनिमेसन कति लामो समयसम्म चल्नेछ भनेर निर्दिष्ट गर्दछ। अवधिहरू पूर्व स्ट्रिङहरू मध्ये एक प्रयोग गरेर निर्दिष्ट गर्न सकिन्छ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एनिमेटेड गुणहरूको लागि nish सापेक्ष मानहरू। यदि मान उपसर्गको साथ निर्दिष्ट गरिएको छ += 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>

Metodo stop()

jQuery विधि stop() हाल चलिरहेको jQuery एनिमेसनहरू वा चयन गरिएका तत्वहरूमा प्रभावहरू पूरा हुनु अघि रोक्न प्रयोग गरिन्छ।

विधिको आधारभूत वाक्य रचना stop() jQuery को साथ दिन सकिन्छ:

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

माथिको सिन्ट्याक्समा मापदण्डहरू निम्न अर्थहरू छन्:

• Il वैकल्पिक प्यारामिटर बुलियन stopAll, पङ्क्तिबद्ध एनिमेसन हटाउने वा नगर्ने निर्दिष्ट गर्दछ। पूर्व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