2 votes

jQuery setTimeout avec animation

J'ai quelques CSS que je veux voir revenir à leur position définie après 2 secondes.

J'utilise ceci :

setTimeout(function() {
        $("div").css("z-index", "");
        $("div").css("height", "");
        $("div").css("width", "");
        $("div").css("marginLeft", "");
        $("div").css("marginTop", "");
}, 2000 );

Cela a pour effet de renvoyer cinq divs différentes à des endroits différents de la page après 2 secondes. Au chargement, elles font ceci :

$(document).ready(function() {
        $("div").css("z-index", "");
        $("#tablet,#phone,#television,#web,#social,#fusion").css({
            width: "500px",
            height: "350px",
            marginLeft: "30%",
            marginTop: "25px",
        }, 750);
});

Je me demandais si vous saviez comment animer les événements après 2 secondes. Pour l'instant c'est juste rapide mais j'aimerais que ce soit une animation pour revenir à l'état initial.

Je l'ai utilisé pour animer les 5 divs en une seule zone lors d'un clic :

$("#tablet,#phone,#television,#web,#social,#fusion").animate({
            width: "500px",
            height: "350px",
            marginLeft: "30%",
            marginTop: "25px",
        }, 750);

Merci de votre attention !

1voto

Kai Qing Points 13588

Traitez-moi de fou, mais il semble que vous ayez la réponse à votre propre question. Vous savez clairement déjà comment utiliser jquery animate, alors pourquoi ne pas l'utiliser au lieu de simplement redéfinir

setTimeout(function() {
        $("#tablet,#phone,#television,#web,#social,#fusion").animate({
            width: "0px",
            height: "0px",
            marginLeft: "0%",
            marginTop: "0px",
        }, 750);
}, 2000 );

D

E

O

c

#div{
    margin-left:20%;
    margin-top:20%;
}

j

$(document).ready(function(){
    $('#div').css({marginTop:'50%', marginLeft:'50%'});

    setTimeout(function() {
        $("#div").animate({
            marginLeft: "20%",
            marginTop: "20%",
        }, 750);
    }, 2000 );
});

S

$(document).ready(function(){
    var div = new Array();
    div.push($('#div').css('margin-top'));
    div.push($('#div').css('margin-left'));

    $('#div').css({marginTop:'50%', marginLeft:'50%'});

    setTimeout(function() {
        $("#div").animate({
            marginLeft: div[0],
            marginTop: div[1],
        }, 750);
    }, 2000 );
});

0voto

aknatn Points 673

I

C

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X