Fade-Effekt
Zu diesem Effekt wollen wir kommen:
Öffnet die HTML-Datei, in der ihr den Fade-Effekt haben möchtet. Zuerst bindet ihr die jQuery-Datei ein. Wo ihr das macht, ist eigentlich egal. Ob im <head>-Bereich oder im <body>. Ihr könnt euch die jQuery-Datei von der offiziellen Seite herunterladen, auf eure Webspace laden und verlinken. Oder ihr verlinkt einfach die aktuelle Version immer extern:
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
Zwischen den Tags, kommt gleich der Code, der für das faden verantwortlich ist. Alles was zwischen die Tags kommt, ist Javascript.
<script type="text/javascript">
//Code
</script>
Weiter gehts:
<script type="text/javascript">
$(document).ready(function() {
//Code
});
</script>
Das heiß soviel wie: Wenn diese Seite ferige geladen wurde, dann wird der folgende Code ausgeführt.
<script type="text/javascript">
$(document).ready(function() {
$('.Hoverbuttons').each(function () {
});
});
</script>
Hier wird die Klasse/ID festgelegt, auf dass, das Script wirken soll. Diese werden getrennt durch ein Komma, falls es mehrere sind.
<script type="text/javascript">
$(document).ready(function() {
$('.Hoverbuttons').each(function () {
var $span = $(this).css('opacity', 0.3);
$(this).hover(function () {
$span.stop().fadeTo(600, 1);
}, function () {
$span.stop().fadeTo(600, 0.3);
});
});
});
</script>
Im ersten Teil wird die Deckkraft auf "0.3" gesetzt. Mit einem Hover (Teil 2) fadet es wieder auf dei volle Deckkraft "1" und im 3. Teil fadet es wieder auf "0.3"(≙ 30% Deckkraft). Mit einer Geschwindigkeit von 600 Millisekunden. Alternativ könnt ihr für "600", "slow" hinschreiben und für "200", "fast".
So, und auf was wird das jetzt angewendet?
<div class="Hoverbuttons"><a href="#" title="">Beispiel</a></div>
Ihr könnt diesen Effekt auf alles Mögliche anwenden, was ziwschen den <div>-Tags rein kann. Zum Beispiel auch Bilder:
Ich hoffe euch hat es geholfen. Vergisst nicht Bloody-Cross bei euren Credits zu verlinken!
