Das beste jQuery UI Beispiel - Ausblenden (Hide)-Tutorial im Jahr 2024. In diesem Tutorial können Sie .Hide () Demo, lernen
Verwenden Sie benutzerdefinierte Effekte passende Elemente zu verbergen.
Für weitere Informationen über .hide()
Einzelheiten der Methoden finden Sie in der API - Dokumentation .Hide () .
Klicken Sie auf die Schaltfläche Effekte, um eine Vorschau.
<! DOCTYPE html> <Html lang = "de"> <Head> <Meta charset = "UTF-8"> <Titel> jQuery UI-Effekte - .Hide () Demo </ title> <Link rel = "stylesheet" href = "// code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <Script src = "// code.jquery.com/jquery-1.9.1.js"> </ script> <Script src = "// code.jquery.com/ui/1.10.4/jquery-ui.js"> </ script> <Link rel = "stylesheet" href = "http://jqueryui.com/resources/demos/style.css"> <Style> .toggler {width: 500px; height: 200px;} #Button {padding: .5em 1em; text-decoration: none;} #effect {width: 240px; height: 135px; padding: 0.4em; position: relative;} #effect h3 {margin: 0; padding: 0.4em; text-align: center;} </ Style> <Script> $ (Function () { // Führen Sie die aktuell Effekt Funktion runEffect ausgewählt () { // Leite Effekte Typ var selectedEffect = $ ( "#effectTypes") .val (); // Die meisten Effekte müssen nicht die Standardlieferoptionen var Optionen type = {}; // Einige Spezialeffekte mit den erforderlichen Parametern if (selectedEffect === "scale") { options = {Prozent: 0}; } Else if (selectedEffect === "Größe") { = Optionen {zu: {width: 200, Höhe: 60}}; } // Führen Effekte $ ( "#effect") .Hide (selectedEffect, Optionen, 1000, Rückruf); }; // Callback Callback-Funktion () { setTimeout (function () { $ ( "#effect") .removeAttr ( "Style") .Hide () fadeIn () .; }, 1000); }; // Stellen Sie den Wert entsprechend der gewählten Menü-Effekte $ ( "#Button") .click (function () { runEffect (); return false; }); }); </ Script> </ Head> <Body> <Div class = "toggler"> <Div id = "Effekt" class = "ui-Widget-Inhalt ui-Ecke-all"> <H3 class = "ui-Widget-Header ui-Ecke-all"> Ausblenden (Hide) </ h3> <P> Etiam libero neque, luctus ein, eleifend nec, semper an, Lorem. Sed pede. Nulla Lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi. </ P> </ Div> </ Div> <Select name = "Effekte" id = "effectTypes"> <Option value = "blind"> Shades Effekte (Blind-Effekt) </ option> <Option value = "bounce"> Rebound-Effekte (Bounce-Effekt) </ option> <Option value = "clip"> Clip-Effekte (Clip-Effekt) </ option> <Option value = "drop"> Landing Effekte (Drop-Effekt) </ option> <Option value = "explodieren"> Explosionseffekte (Explode Effekt) </ option> <Option value = "fold"> Effekte Falten (Falten-Effekt) </ option> <Option value = "highlight"> Highlight-Effekte (Highlight-Effekt) </ option> <Option value = "puff"> Expansionseffekte (Puff-Effekt) </ option> <Option value = "pulsieren"> schlagen Effekte (Pulsate Effect) </ option> <Option value = "Skala"> Zoom-Effekte (Skaleneffekt) </ option> <Option value = "shake"> Vibrationseffekte (Shake-Effekt) </ option> <Option value = "Größe"> Größeneffekte (Size Effect) </ option> <Option value = "slide"> Dia-Effekte (Slide-Effekt) </ option> </ Select> <a href="#" id="button" class="ui-state-default ui-corner-all"> laufen Effekte </a> </ Body> </ Html>