Tutorial jQuery - Color Animation - NOF 2013 in HTML5 - ich beschreibe hier genau meinen Einbau. Alle Style-Anweisungen können natürlich geändert werden

Bitte fügt zunächst die notwendigen Links zu den jQuery-Dateien ein. Es ist notwendig diese Dateien in den <>Code Editor der jeweiligen Seite einzufügen, den Ihr unten links auf jeder Arbeitsseite findet. Diese Skripte korrespondieren nicht mit den NOF eigenen Javascripts. Fügt diese Verlinkungen dort in den [customs4] Bereich ein, damit diese unter den JS-Dateien von NOF stehen.

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

Nun fügt Ihr folgende Style-Anweisung in die HTML des Layouts ein.

> Layout markieren > Fenster “Layout-Eigenschaften” > Button “HTML” > “Zwischen Head Tags” einfügen.

<style>
   .toggler { width: 500px; height: 200px; position: relative; }
   #button { padding: .5em 1em; text-decoration: none; }
   #effect { width: 240px; height: 135px; padding: 0.4em; position: relative; background: #fff; }
   #effect h3 { margin: 0; padding: 0.4em; text-align: center; }
</style>

Zieht Euch ein Textfeld an der Position, wo dieses Skript angezeigt werden soll, auf und fügt das Skript unten in den “HTML-Code Editor” des Textfeldes ein.

<script>
    $(function() {
     var state = true;
     $( "#button" ).click(function() {
     if ( state ) {
      $( "#effect" ).animate({
      backgroundColor: "#B9BBC7",
      color: "#fff",
      width: 600
      }, 1000 );
     } else {
      $( "#effect" ).animate({
      backgroundColor: "#fff",
      color: "#000",
      width: 240
      }, 1000 );
     }
     state = !state;
     });
    });
</script>

<div class="toggler">
    <div id="effect" class="ui-widget-content ui-corner-all">
     <h3 class="ui-widget-header ui-corner-all">Animation</h3>
     <p>
     Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.
     </p>
    </div>
</div>
<a href="#" id="button" class="ui-state-default ui-corner-all">Zeige Effekt</a>

Guckt bitte für weiter Einstellungen hier: jqueryui.com/animate/

Viel Erfolg!

Tutorials von Thomas Frei-Herrmann

diese Seite weiter empfehlen


Counter Statistik