jQuery : 위치에 애니메이션을 할 수 있습니까 : 절대적인 위치 : 상대?

Question

나는 절대적으로 배치 된 많은 이미지를 가지고 있습니다. 버튼을 클릭하고 위치가있는 경우 일반적으로 페이지에있는 위치에 애니메이션을주고 싶습니다.

그렇다면 위치에서 애니메이션을 할 수 있습니까?

이것이 내가 가진 것입니다.

$(".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 에게 relative, 원래 위치에서 현재 위치로 애니메이션.

Answer 4

나는 Tatu의 솔루션을 좋아하지만이 재사용 가능한 코드는 내 목적을 위해 더 나은 것으로 나타났습니다.

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')를 새로운 위치로 밀어 넣고 싶다고 가정 해 봅시다. 나는 이것을 호출 할 수있다 :

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)

})