jQuery - Effecten


jQuery kent een aantal standaard effecten die gebruikt kunnen worden. Hieronder een aantal effecten die toegepast kunnen worden, in dit geval zijn de effecten zo ingesteld dat ze worden toegepast na het klikken op een element. Daarnaast is het zo dat er plugins beschikbaar gemaakt zijn door andere ontwikkelaars om andere effecten te gebruiken.

Hieronder gaat het om het sliden van een element of langzaam tevoorschijn laten komen. Het is wel van belang dat er voor elk element dat standaard is verborgen en met een effect in beeld komt er in de CSS 'display:none;' eerst wordt ingesteld, dit is uiteraard niet van toepassing op 'hide' en 'fadeOut' omdat hier juist elementen mee worden verborgen.

$(document).ready(function() {
        $('#link').click(function() {
                $('#element').show(1000);
        });

        $('#link').click(function() {
                $('#element').hide(1000);
        });

        $('#link').click(function() {
                $('#element').fadeIn(1000);
        });

        $('#link').click(function() {
                $('#element').fadeOut(1000);
        });

        $('#link').click(function() {
                $('#element').fadeToggle(1000);
        });

        $('#link').click(function() {
                $('#element').slideDown(1000);
        });

        $('#link').click(function() {
                $('#element').slideUp(1000);
        });

        $('#link').click(function() {
                $('#element').slideToggle(1000);
                $('#link').toggleClass("active");
                return false;
        });
});