JQuery፣ ተለዋዋጭ ተፅእኖዎችን በJQuery እንዴት መተግበር እንችላለን

በJQuery በኤችቲኤምኤል ገጽ አካላት ላይ በመተግበር ተለዋዋጭ ተፅእኖዎችን፣ እነማዎችን እና ደብዝዘዞችን መፍጠር ይችላሉ።

አኒሜሽን ለመፍጠር የተለያዩ የ JQuery ዘዴዎችን እንዴት መጠቀም እንደሚቻል በዚህ ጽሑፍ ውስጥ እንመለከታለን።

የኤችቲኤምኤል አባል ደብቅ እና አሳይ

ዘዴዎች 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() የኤችቲኤምኤል ኤለመንቶችን ለማሳየት ወይም ለመደበቅ ቀስ በቀስ ግልጽነታቸውን በመጨመር ወይም በመቀነስ እና እየደበዘዘ የሚሄድ ውጤት ይፈጥራል።

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

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() እንደ የቁጥር ሲኤስኤስ ባህሪያትን ለማንቃት ይጠቅማል 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 የአማራጭ መለኪያ ቡሊያን ማቆሚያ ሁሉም፣ የተሰለፈውን አኒሜሽን ማስወገድ ወይም አለማስወገድን ይገልጻል። ቅድመdefinite ነው false, ይህ ማለት አሁን ያለው አኒሜሽን ብቻ ነው የሚቆመው, የተቀሩት ተንቀሳቃሽ ምስሎች በኋላ ላይ ይከናወናሉ.
• የቦሊያን መለኪያ goToEnd አማራጭ የአሁኑን እነማ ወዲያውኑ ማጠናቀቅ አለመጠናቀቁን ይገልጻል። ቅድመdefinite ነው 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>

ተዘዋዋሪ

የጃቫ ስክሪፕት መግለጫዎች በመስመር ይከናወናሉ። ነገር ግን፣ የ 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