Najlepszy samouczek jQuery UI Przykłady - Animacja kolorowa (Animacja kolorowa) W 2024 r. W tym samouczku możesz dowiedzieć się Anime (Animacja) Demo,
Użyj .animate (), aby uzyskać animację koloru.
Aby uzyskać więcej informacji na temat animacji koloru (Animacja kolorowa) Szczegółowe informacje można znaleźć w dokumentacji API Animation (animacja kolorów kolor) .
jQuery UI w zestawie plugin jQuery Kolor, wtyczki jQuery kolorami pozwala na animację kolorów oraz wiele innych funkcji użytkowych związane z kolorami.
Kliknij przycisk, aby wyświetlić podgląd efektów.
<! DOCTYPE html> <Html lang = "pl"> <Head> <Meta charset = "utf-8"> <Title> jQuery UI Effects - Animation (Animacja) 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; position: relative;} #button {padding: .5em 1em; text-decoration: none;} #effect {width: 240 piks; height: 135px; padding: 0.4em; position: relative; background: #fff;} #effect h3 {margin: 0; padding: 0.4em; text-align: center;} </ Style> <Script> $ (Function () { Stan var = true; $ ( "#button") .Kliknij (Function () { if (state) { $ ( "#effect") .animate ({ backgroundColor: "# aa0000" kolor: "#fff" szerokość: 500 }, 1000); } Else { $ ( "#effect") .animate ({ backgroundColor: "#fff" kolor: "# 000" szerokość: 240 }, 1000); } state = stan !; }); }); </ Script> </ Head> <Body> <Div class = "wahacz"> <Div id = "efekt" class = "widget-ui ui-content-corner-all"> <H3 class = "widget-ui ui-header-corner-all"> Anime (Animacja) </ h3> <P> Etiam libero neque, luctus a, eleifend, gdzie indziej niesklasyfikowane, sempre się, lorem. Sed pede. Nulla ipsum Metusa, adipiscing UT, luctus sed vitae, hendrerit, MI. </ P> </ Div> </ Div> <a href="#" id="button" class="ui-state-default ui-corner-all"> efekty przełączania </a> </ Body> </ Html>