مسج: هل يمكنني تحريك الموقف: مطلق إلى وضع: قريب؟

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 Numberic".

Answer 3

رقم.

ومع ذلك، يمكنك التحقق من موقع العنصر الحالي (الاتصال .position())، تعيين position ل 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"). انقر (وظيفة () {$ (". Book_IMG"). CSS ({'الوضع': 'قريب'}). تحريك ({الأعلى: '0px'، يسار: '0px'} ، 1000)})