jquery: i peut animer la position: absolute position: relative?

Question

J'ai un tas d'images qui sont positionnés absolument, je veux être en mesure de cliquer sur un bouton et ont tous animés où ils seraient normalement sur la page si elles avaient la position. Relative

est-il même possible d'animer de la position: absolute position: relative jquery

?

ce que j'ai:

$(".change_layout").click(function(){

    $(".book_img").animate({position:'relative', top:'0px', left:'0px'}, 1000)

})

Answer 1

Non, vous ne pouvez pas animer directement, mais vous pouvez trouver le point final et animer la position là. Quelque chose comme cela pourrait fonctionner lorsque l'animation à la position static:

$('img.foo').each(function() {

    var el = $(this);

    // Make it static
    el.css({
        visibility: 'hidden', // Hide it so the position change isn't visible
        position: 'static'
    });

    // Get the static position
    var end = el.position();

    // Turn it back to absolute
    el.css({
        visibility: 'visible', // Show it
        position: 'absolute'
    }).animate({ // Animate to the static position
        top: end.top,
        left: end.left
    }, function() { // Make it static
        $(this).css('position', 'static');
    });
});

Il est un peu hacky, mais il devrait fonctionner.

Answer 2

Je ne pense pas que vous pouvez le faire. Animer ne fonctionne que sur une "propriété CSS numérique".

Answer 3

Non.

Cependant, vous pouvez vérifier l'emplacement actuel de l'élément (appel .position()), réglez le position à relative, et animer de l'emplacement d'origine à l'actuel.

Answer 4

J'aime la solution de Tatu mais trouvé ce code réutilisable pour mieux pour mes besoins:

function specialSlide(el, properties, options){
    //http://stackoverflow.com/a/2202831/
    el.css({
        visibility: 'hidden', // Hide it so the position change isn't visible
        position: 'static'
    });
    var origPos = el.position();
    el.css({
        visibility: 'visible', // Unhide it (now that position is 'absolute')
        position: 'absolute',
        top: origPos.top,
        left: origPos.left
    }).animate(properties, options);
}

Disons que je veux faire glisser $ ( « # elementToMove ») à une nouvelle position, et je veux qu'il prenne 1000 millisecondes pour se déplacer. Je peux appeler ceci:

var props = {'top' : 200, 'left' : 300};
var options = {'duration': 1000};
specialSlide($('#elementToMove'), props, options);

Answer 5

Vous pouvez essayer la méthode css pour le rendre relatif et puis animer.

$(".change_layout").click(function(){

    $(".book_img").css({'position': 'relative'}).animate({top:'0px', left:'0px'}, 1000)

})