JQuery, quomodo effectus dynamicos efficere possumus cum JQuery?

Cum JQuery potes effectus dynamicos, animationes et fades creare in elementis paginae HTML agendi.

In hoc articulo videbimus quomodo utantur modos diversorum JQuery generandorum animationum.

Celare et ostende HTML elementum

modi hide() Et show()

Corium () methodum simpliciter ponit stylum inline display: none nam lectus item. Econtra spectaculum () methodum ostentationis proprietates restaurat. 

Videamus exemplum:

<script>
$(document).ready(function(){
    // Hide displayed paragraphs
    $(".hide-btn").click(function(){
        $("p").hide();
    });
    
    // Show hidden paragraphs
    $(".show-btn").click(function(){
        $("p").show();
    });
});
</script>

In primo casu paragraphi abscondita est cum es tesserae strepita (hide-btn) , in secundo casu paragraphi ostenditur cum es in puga strepita (show-btn).

Etiam modulo durationem specificare potes, ad spectaculum animandum et effectum ad temporis spatium abscondendum.

Durationes specificari possunt uti una chordarum praecellentiumdefinite 'slow' o 'fast'aut in millisecondo, ut accuratius; altiora bona tardius indicant animationes.

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

Filum predefipuella 'fast' indicat durationem CC milliseconds, dum filum 'slow' indicat durationem DC milliseconds.

Munus autem specificare possumus callback exsecutioni mandari post modum complementum show() aut de 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>

In modum toggle

Modus jQuery toggle() ostendat vel abscondat ita, ut si prius ostensus fuerit, latebit; econverso si latet, ostendetur (ut fere toggles suam visibilitatem).

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

Similiter modulum exprimere potes duration ad modum toggle()ita ut animaret transitum inter visibiles et occultos, sicut methodi 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>

Similiter etiam functio specificare potes callback ad modum 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 cecidimus effectus

modi fadeIn() e fadeOut()

Modos uti potes jQuery fadeIn()e fadeOut() ut HTML elementa ostendant vel abscondant, opacitatem suam paulatim augentes vel decrescentes et effectum caducum creant.

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

Sicut alii effectus modi effecti, optione specificare potes durationem seu celeritatem moduli modorum fadeIn()e fadeOut()ad temperandum vetustatem. Durationes specificari possunt uti una chordarum praecellentiumdefinite 'slow' o 'fast'aut plurium millium secundorum; altiora bona tardius indicant animationes.

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

effectus modi fadeIn() / fadeOut() Simile est show() / hide(), sed modis dissimilis show() / hide()illae tantum elementorum opacitatem animant nec magnitudinem animant.

Etiam munus specificare potes callback currere ad rationem completam 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>

Regula fadeToggle()

Modus jQuery fadeToggle() elementa electa ostendat vel coria opacitate animando ita ut, si elementum initio exhibeatur, defluat; si occultum fuerit, deficiet (i.e. toggle a fade effect).

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

Denominare potes vitam moduli pro methodo fadeToggle() ut modos fadeIn() / fadeOut()temperare durationem seu celeritatem voltus animationis.

<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 () methodus etiam facultatem munus definiendi habet 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>

Regula fadeTo()

Modus jQuery fadeTo() similis modus est fadeIn()sed dissimilis modus fadeIn(), modus fadeTo() sinit te elementa miscere usque ad certum gradum opacitatis.

$(selector).fadeTo(speed, opacity, callback);

Requiritur parametri opacity significat ultimam opacitatem scopo elementorum quae esse potest numerus inter 0 et 1. parameter duration o speed requiritur etiam ad hunc modum qui speciem durationis animationis decidet.

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

volumen effectus

modi slideUp() e slideDown()

Modus jQuery slideUp() e slideDown() elementa celare vel ostendere HTML paulatim decrescendo vel augendo altitudinem suam adhibentur (i.e. scrolling sursum vel deorsum).

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

Sicut alii effectus modi effecti, optione specificare potes durationem seu celeritatem moduli modorum slideUp() e slideDown() ad control diuturnitatem slide animationem. Durationes specificari possunt uti una chordarum praecellentiumdefinite 'slow' o 'fast'aut plurium millium secundorum; altiora bona tardius indicant animationes.

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

Etiam specificare potes callback munus exequi post modum complementum 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>

Regula slideToggle()

Modus jQuery slideToggle() electa elementa ostendant vel abscondant, altitudine sua animante, ut si elementum initio exhibeatur, perscribatur; si latet, toggles inter methodos scribetur, i.e slideUp() e slideDown().

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

Similiter modulum vitalem definire potes pro methodo slideToggle() venit 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>

Similiter munus callbacki pro methodo denotare potes 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>

Animationem effectus

Regula animate()

Modus jQuery animate() usus est ad animationes creandas consuetudo. Modus animate() animatis proprietates numerorum CSS, ut width, height, margin, padding, opacity, top, left etc. sed proprietatibus non-numeris sicut color o background-color jQuery functionem fundamentalem utentes animari non possunt.

Syntaxis fundamentalis methodi animate() est haec:

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

Modus parametri animate() habent sequentia.

• Requisita proprietatibus parametri defipossessiones css ad perficiendum animatis.
• Modus durationis libitum designat quousque animatio currat. Durationes specificari possunt uti una chordarum praecellentiumdefinite 'slow' o 'fast'aut plurium millium secundorum; altiora bona tardius indicant animationes.
• Parameter callback libitum munus est vocandi postquam animationem completum est.

Infra exemplum methodi simplex est animate() quae imago animat a situ pristino ad dextram per 300 elementa in globulis strepita.

<script>
$(document).ready(function(){
    $("button").click(function(){
        $("img").animate({
            left: 300
        });
    });
});
</script>

Plures proprietates elementi simul simul utendo methodo animare potes animate(). Omnes possessiones sine ulla mora simul animabantur.

<script>
$(document).ready(function(){
    $("button").click(function(){
        $(".box").animate({
            width: "300px",
            height: "300px",
            marginLeft: "150px",
            borderWidth: "10px",
            opacity: 0.5
        });
    });
});
</script>

Plures proprietates elementi singulatim singulariter animare potes, in queue functione concatenationis jQuery utens.

Hoc exemplum ostendet animationem sitam vel ligatam, ubi unaquaeque animatio incipiet semel animationem priorem in elemento completo. Munus concatenationis in futuro articulo videbimus.

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

Is est quoque possible definish valoribus relativis pro proprietatibus animatis. Si valorem condividitur cum praepositione += o -=, valor scopo computatur addendo vel minuendo numerum determinatum e valore praesentis proprietatis.

<script>
$(document).ready(function(){
    $("button").click(function(){
        $(".box").animate({            
            top: "+=50px",
            left: "+=50px",
            width: "+=50px",
            height: "+=50px"
        });
    });
});
</script>

Praeter valores numerorum, quaelibet proprietas chordas accipere potest 'show', 'hide' e 'toggle'. Perutile erit in casu quo vis bona animare a suo currenti valore ad suum initialem valorem et e converso.

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

Regula stop()

Modus jQuery stop() jQuery animationes vel effectus in selectis elementis ante completionem currens prohibere consuevit.

Syntaxis fundamentalis methodi stop() jQuery with danda potest;

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

Parametri in syntaxi superiore sequentia significant;

• Il ad libitum parametri Boolean stopAllnotificat sitnm animationem tollere necne. The predefinite is falsehoc significat solum quod animatio hodierna obstruetur, reliquae animationes in queue postea futurae erunt.
• Boolean parametri goToEnd ad libitum designat utrum animationem hodiernam statim perficiat. The predefinite is false.

Hic est simplex exemplum demonstrandi modum stop() in actione reali ubi inire et obsistere animationem in pressione bullam potes.

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

En aliud exemplum huius methodi ubi si denuo pyga premesSlide Toggle" Incipiens animationem sed antequam perficiat, statim animatio in oppositum incipiet ab initio servato.

<script>
$(document).ready(function(){
    // Kill and toggle the current sliding animation
    $(".toggle-btn").on("click", function(){
        $(".box").stop().slideToggle(1000);
    });
});
</script>

Cum animatum aliquet effectum creando, una ex communissimis quaestionibus, licet occurrat, sunt multae animationes queued, cum cito locum ac murem cursorem remove. Cur in hoc statu? mouseenter gli mouseleave certe celeriter accenduntur antequam animationem compleat. Ad hanc quaestionem evitare et lepidum ac leve volitans effectum creare, addere potes stop(true, true)ad modum catenae, ut sic;

<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 dicta fiunt per lineam rectam. Sed, cum effectus inquisitionis ad perficiendum aliquid temporis accipiat, codice sequentis lineae curreret dum prior effectus adhuc currit. Quod ut ne fiat, jQuery munus unicuique effectus modum callback praebet.

A callback munus est functio quae semel currit effectus est perfectus. Munus callback proponitur ut argumentatio ad methodos effectus, et plerumque ut ultima ratio argumenti apparebit. Exempli gratia, syntaxin fundamentalis methodi jQueryi effectus slideToggle() cum callback munus quod potest specificari sic:

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

Hoc exemplum attende ubi propositiones posuimus slideToggle()e alert()unum juxta alterum. Si hunc codicem temptas, intentus statim apparebit statim postquam puga toggle strepitando non exspectato lapsus toggle effectum ad perficiendum.

<script>
$(document).ready(function(){
    $("button").click(function(){
        $("p").slideToggle("slow");
        alert("The slide toggle effect has completed.");
    });   
});
</script>

Et hic est mutatio exempli superioris versio ubi hanc propositionem inseruimus alert() intra callback munus ad modum slideToggle(). Si hoc signum temptas, nuntius monitus apparebit semel effectibus lapsus toggle completo.

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

Item, potes defifunctiones callback perficias pro aliis methodis effectibus jQuery, ut show(), hide(), fadeIn(), fadeOut(), animate(), Etc.

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

Si temptas specimen codicem superius, idem nuntius capies monitus bis semel per item <h1> e <p>, strepitando in deprimendo activate.

BlogInnovazione.it