jQuery - تحريك العنصر الذي لديه أطفال في وضع مطلقا خارجها - يومض

Question

سامحني إذا تم تناول هذا من قبل، لم أستطع العثور على أي شيء.

أنا أسقط شريط محتوى يحتوي على أطفال يضعون خارجا خارجها (عبر هوامش سلبية). الفكرة هي أن الأطفال سيقومون بالتحريك مع الشريط كما يتوسع.

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

لقد قمت بتحميل مثال بسيط حقا هنا، جميع البرامج النصية المضمنة في الصفحة:http://www.ismailshallis.com/jdemo/

ما يحدث في الواقع؟ ما هي خياراتي للعمل حول هذا؟

شكرا كثيرا مسبقا،

بيليندا

Answer 1

عندما يقوم JQuery بالتحريك إما ارتفاع أو عرض عنصر، فسيتم ضبطه تلقائيا overflow: hidden على العنصر أثناء حدوث الرسوم المتحركة. نظرا لوضع عنصر طفلك في الخارج، فإنه جزء تقني من الفائض. التعليق في مصدر مسج بالقرب من القانون الذي يقول هذا يقول "// تأكد من أن لا شيء يتسلل". إذا قمت بتضمين مصدر JQuery غير المضغوط والتعليق على خط 4032 من JQuery-1.3.2.js (داخل animate وظيفة):

//this.style.overflow = "hidden";

سترى أن الرسوم المتحركة تعمل بالطريقة التي تقصد بها. لست متأكدا من الحل البديل غير تعديل مصدر مسج من خلال التعليق على هذا الخط أعلاه.

Answer 2

اعتبارا من jQuery 1.4.3 هناك حل آخر لا يتطلب تعديل jQuery. إذا قمت بتعيين أسلوب "تجاوز الفضيل" للعنصر الذي تقوم بتنشيطه كأناقة مضمنة قبل بدء تشغيل الرسوم المتحركة، فلن يقوم JQuery بتعيين نمط "تجاوز تجاوز" إلى مخفي. علي سبيل المثال:

<script type="text/javascript">
    $(document).ready(function() {
        $("#box a").click(function() {
            $("#box")

            // Prevents absolutely positioned elements from getting clipped.
            .css('overflow', 'visible')

            .animate({
                height: "410px"
            })

            // Reset the 'overflow' style.  You could also put this in the 
            // animate() callback.
            .css('overflow', '');
        });
    });
</script>

Answer 3

حسنا - يبدو أنه وظيفة للمتصفح أو مسج، وليس بالضرورة بالطريقة التي قمت ببناءها HTML أو JavaScript. أقول هذا لأنه يبدو فقط منطقة بكسل فقط داخل المربع المحيط من عنصر DOM يبدو أن يتم تقديمه (حاول نقل النص حتى يكون نصف النص خارج، ونصف داخل ... ترى قطعة "قطع" النص كما ينشط.)

إذن إليك العمل حولها: يستخدم غلاف مجمع حول "#box" و "#OUTSIDE" بحيث يكون كلاهما داخل صندوق التحطية المجمع.

CSS:

    #boxWrapper {
        position: fixed;
        top: 50%;
        left:  50%;
        width: 200px;
        height: 200px;
        margin-left: -100px;
        margin-top: -120px; /* extra 20px for the #outside */
        background:#ccc;
    }

    #box {
        background: #000;
        height:100%;
        width:100%;
        margin-top:20px; /* give 20px for the #outside */
    }

    #outside {
        background:darkblue;
        position: absolute;
        top: 0px;
        right: 0; }

و HTML:

<div id="boxWrapper">
    <div id="box">
        <a href="#">CLICK ME</a>
        <div id="outside">
            I'm positioned OUTSIDE the box
        </div>
    </div>
</div>

وجافا سكريبت:

<script type="text/javascript">
    $(document).ready(function() {

            $("#box a").click(function(){
                $("#boxWrapper").animate({ 
                        height: "410px",
                        opacity: 0.9,
                        top: "25%"
                      }, 1000 );
                return false;
            });
        }); 

</script>   

Answer 4

بدلا من ذلك، يمكنك الإشارة إلى تفضيلك الذي لا يزال العنصر visible باستخدام !important تخصيص.

#box {
  overflow: visible !important;
}