مسج:يعود div إلى الحجم الكامل بعد الرسوم المتحركة

Question

في مثال jQuery أدناه، لدي div داخل آخر.عندما أقوم بتحريك القسم الداخلي إلى عرض 0، يتناقص عرض القسم الخارجي (الذي له موضع مطلق) معه.

هذا هو المطلوب.

المشكلة هي أنه بعد اكتمال الرسم المتحرك، يعود القسم الخارجي إلى حجمه الأصلي.هل هذا متوقع؟كيف يمكنني منع حدوث ذلك؟

شكرًا!

مثال

لغة البرمجة:

<div class="outer"><div class="inner">innerContent</div></div>

---

المغلق:

div.outer {
    position: absolute;
    padding: 10px;
    background: purple;
}

div.inner {
    position: relative;
    padding-left: 5px;
    padding-right: 5px;
    background: orange;
    clip: auto; overflow: hidden;
}

---

جافا سكريبت:

$('.outer').click(function() { 
    $('.inner').animate({width: 0, paddingLeft: 0, paddingRight: 0}, 'slow');
});

Answer 1

يبدو الأمر كما لو أنني حصلت على عرض قسم div "الخارجي" والعرض الخارجي لقسم div "الداخلي"، ثم طرحت عرض div "الخارجي" من العرض الخارجي لقسم div "الداخلي"، وقمت بتحريك العرض "الخارجي" إلى النتيجة في نفس الوقت أثناء تحريك "الداخلي" إلى 0، فإنه يعمل.

أي آراء حول ما إذا كان ينبغي أن يكون هذا طلب إصلاح خطأ لـ jquery أو webkit أو كليهما.

$('.outer').click(function() { 
    var innerWidth = $('.inner').outerWidth();
    var outerWidth = $('.outer').width();
    var theWidth = outerWidth - innerWidth;
    $('.inner').animate({width: 0, paddingLeft: 0, paddingRight: 0}, 'slow' );
    $('.outer').animate({width: theWidth}, 'slow');
});

Answer 2

هل حاولت ضبط عرض الصندوق الخارجي على 0 بعد اكتمال الرسوم المتحركة؟

$('.inner').animate({width: 0, paddingLeft: 0, paddingRight: 0}, 'slow', function() {
  $('.outer').css("width", 0);
});

Answer 3

بالنسبة لي في Firefox 3.0.10 باستخدام jQuery 1.3.2 في Ubuntu 9.04، هذا يعمل بشكل مثالي.ربما يكون هذا نوعًا من التفاعل مع عناصر html الأخرى في صفحتك؟

Answer 4

في اختباراتي، كان هذا يعمل بشكل جيد في IE وFF وOpera، ولكنه أدى إلى ظهور الخطأ الذي ذكرته في Chrome وSafari.