jQueryのは：位置への絶対：：相対私は位置をアニメーション化することができますか？

Question

私は、ボタンをクリックできるようにしたいと、彼らはポジションを持っていた場合、それらすべてが、彼らは通常、ページ上だろうどこにアニメーション化する必要があり、絶対的に配置されている画像の束を持っている：。相対

ので、位置からアニメーション化することも可能である：絶対位置に：jqueryの内の相対

？

これは私が持っているものです。

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

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

})

Answer 1

いいえ、あなたは直接それをアニメーション化することはできませんが、エンドポイントを見つけると、そこに位置をアニメーション化することができます。このような何かが働くかもしれないとき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');
    });
});

それは少しハックだが、それは動作するはずです。

Answer 2

私はあなたがそれを行うことができるとは思いません。 jQueryのアニメイトにのみ任意の "数値のCSSプロパティ" 上で動作します。

Answer 3

はありません。

しかし、あなたは（.position()を呼び出す）要素の現在位置を確認することができ、position、現在の1に元の場所からアニメーション化するrelativeを設定します。

Answer 4

私はタトゥのソリューションを好むが、私の目的のために優れていることが、この再利用可能なコードを見つけます：

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);
}

のは、私が新しい位置に$（「＃のelementToMove」）をスライドにしたい、と私はそれを移動するために1000ミリ秒を取りたいとしましょう。私はこれを呼び出すことができます：

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

Answer 5

あなたはそれが相対行い、その後、アニメーション化するために、CSSの方法を試すことができます。

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

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

})