jQuery - Animeren


Met de onderstaande code kun je een animatie toepassen. Zo stel je bijvoorbeeld in dat na een klik de breedte van een element aangepast wordt, je kan de positie veranderen, margens aanpassen evenals de dikte van randen, etc. Hieronder een aantal voorbeelden.

Aanvullend op de code kun je eventueel nog de plugin jQuery Easing gebruiken om aanvullende animaties toe te kunnen passen, downloaden van de plugin kan hier. In de code hieronder zie je bijvoorbeeld 'easeOutBounce' staan en hiervoor is de plugin vereist.

$(document).ready(function() {
        $("#main").click(function() {
                $('.element').animate({
                        opacity: "0.5",
                        marginLeft: "50px",
                        fontSize: "30px",
                        borderWidth: "10px",
                        width: ['+=50', 'easeOutBounce']
                }, 2000);
        });

        $("#main").click(function(){
                $(".element").animate({"borderWidth":"10px"},"slow");
        });

        $("#main").click(function(){
                $(".element").animate({height:"toggle",opacity:"toggle"},"slow");
        });
});

Achter elkaar

In de bovenstaande voorbeelden worden alle animaties tegelijkertijd afgespeeld maar op een vergelijkbare manier kun je de animaties ook allemaal achter elkaar laten afspelen.

$(document).ready(function() {
        $("#link").click(function() {
                $("#element").animate({height:"300px"},"slow")
                .animate({opacity:"0.5"},"slow")
                .animate({width: '-=50'}, "slow")
                .animate({right: '-50'}, "slow")
                .animate({opacity:"1.0"},"slow");
        });
});

Hover

Of bijvoorbeeld een bepaalde animatie zodra je op een element gaat staan met de muis.

$(document).ready(function() {
        $("a").hover(function() {
                $(this).stop().animate({marginLeft : "10px"},200);
        },function() {
                $(this).stop().animate({marginLeft : "0px"},200);
        });
});

Roteren

Een ander voorbeeld is het geanimeerd roteren van een element, met de onderstaande code roteert een element constant, dit wordt toegepast in combinatie met CSS3. Dit werkt in Google Chrome en Firefox en Internet Explorer 9 en hoger, niet in versies 7 en 8.

$(document).ready(function() {
        $(function() {
                roteren(10);
                function roteren(graden) {
                        $(".element").css({ WebkitTransform: 'rotate(' + graden + 'deg)'});
                        $(".element").css({ '-moz-transform': 'rotate(' + graden + 'deg)'});
                        $(".element").css({ '-ms-transform': 'rotate(' + graden + 'deg)'});
                        $(".element").css({ '-o-transform': 'rotate(' + graden + 'deg)'});
                        $(".element").css({ 'transform': 'rotate(' + graden + 'deg)'});
                        timer = setTimeout(function() {
                                roteren(++graden);
                        },10);
                }
        });
});

Achtergrondafbeelding

Met het onderstaande voorbeeld verplaats je de positie van een achtergrondafbeelding, hierbij moet wel gezegd worden dat deze volledige code ook gewoon in een CSS bestand geplaatst kan worden. Dit werkt in browsers Google Chrome, Firefox, Safari en Opera.

$(document).ready(function() {
        $(".element").hover(function() {
                $("body").css({ backgroundPosition: '0px 50px'});
                $("body").css({ WebkitTransition: 'all 0.5s ease'});
                $("body").css({ '-moz-transition': 'all 0.5s ease'});
                $("body").css({ '-o-transition': 'all 0.5s ease'});
                $("body").css({ 'transition': 'all 0.5s ease'});
        },function() {
                $("body").css({ backgroundPosition: '0px 0px'});
        });
s });

Animaties uitschakelen

Voor als je even alle animaties in een website wil uitschakelen.

$.fx.off = !$.fx.off;