Effekte mit der jQuery JavaScript Library

Mit der jQuery JavaScript Library sind tolle Effekte möglich, wie z. B. Sliding, Fading, Animating etc.
Wir haben uns selber noch nicht viel mit jQuery befasst, wollen aber unsere ersten Versuche hier als Einstiegsanleitung niederschreiben.

Also zu erst muss die Library ins Template eingebunden werden. Entweder man lädt sich die .js Datei hier herunter und bindet sie anschließend so (am besten im Header) ein:

<script src="jquery-1.3.2.min.js" type="text/javascript"></script>

oder man bindet z. B. direkt die von jquery.com ein:

<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>

So, nachdem nun die Library eingebunden ist, können wir mit dem Javascript beginnen. Es läuft immer nach ähnlichem Schema.
Erst sagen wir, wir wollen eine Funktion:

$(document).ready(function()

Dann können wir bei Bedarf bestimmen, welches Element/Objekt bei Klick o. ä. die Änderung vornehmen soll:

$("button").click(function ()

Auf jeden Fall werden dann die Element/Objekte bestimmt, welche ihr Aussehen/Verhalten ändern sollen:

$("p").slideToggle

Als 1. kleines Beispiel lassen wir mit slideToggle alle Texte innernhalb eine p-Tags durch einen Button ein-/ausblenden:

<script type="text/javascript">
$(document).ready(function(){

$("button").click(function () {
$("p").slideToggle("slow");
});

});
</script>

<button>Text ein-/ausblenden</button>

<p>
Hier steht der Text der nun ein- bzw. ausgeblendet werden kann.
</p>

Hier kannst du es testen

Als 2. Beispiel wollen wir zeigen, wie z. B. die Kombination von mehreren Elementen/Objekte mit mehrfacher Veränderung möglich sind:

<script type="text/javascript">
$(document).ready(function(){

$("button").click(function () {
$("div.block").add("p.extra").addClass("blau");
alert("Class in blau geaendert");
});

});
</script>

Hier kannst du es testen

Eine weitere Spielerei wäre ein FadeIn-Effekt bei allen Bildern die im Div-Container "#content" sitzen:

<script type="text/javascript">
 $(document).ready(function() {
 $("#content img").css("display","none");
 $("#content img").fadeIn(5000)
});
</script> 

Hier kannst du es testen

Weitere Effekte findest du in der jQuery-Documentation: http://docs.jquery.com/Effects

Ein kleiner Hinweis für WordPress-User:

WordPress bringt eine jquery.js im Verzeichnis /wp-includes/js/jquery/jquery.js mit. Falls ihr also damit arbeiten wollt ist eine kleine Abweichung zu beachten. Statt des $-Zeichen muss in WP jQuery benutzt werden:

<script src="http://www.deine_domain.xyz/wp-includes/js/jquery/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function(){

jQuery("button").click(function(){
jQuery("div.block").add("p.extra").toggleClass("blau");
alert("Class geaendert");
});

});
</script>

Falls ihr in WordPress nicht mit der WP eigenen jquery.js arbeiten wollt, könnt ihr diese deaktiveren und eine andere einbinden. Könnte sein, dass in eurer header.php, footer.php oder functions.php schon der Aufruf der jquery drin steht:

<?php 
wp_enqueue_script('jquery');
?>

Das dann wie folgt ändern bzw. hinzufügen, falls es noch nicht vorhanden ist:

<?php 
wp_deregister_script( 'jquery' ); //derigistriert die jquery von WP
wp_register_script( 'jquery', 'http://code.jquery.com/jquery-latest.js'); //registriert die jquery von der externen URL
wp_enqueue_script( 'jquery' ); //laedt die neue jquery
?>

Empfehle uns: