باستخدام setTimeout تأخير مسج الرسوم المتحركة

Question

أنا أعمل على بعض التحولات على صورة عندما يضغط المستخدم على الزر للانتقال إلى الصورة التالية.عندما تكون هناك صور متعددة بجانب بعضها البعض التي هي ضيقة جدا تلك الصور جميع الانتقال في نفس الوقت.لذا تحقق من عرض على الصور و إضافة رقيقة منها إلى صفيف ثم تشغيل الانتقال على كل كائن في الصفيف.أردت أن تخلق تأخر قليلا بين الرسوم المتحركة من كل صورة في مجموعة لذلك أنا أحاول أن أدير مسج.الأرواح بعد 1 ثانية المهلة.

هنا طرق حاولت الحصول على مهلة العمل دون نجاح:

1.

for (i=0; i < set.length; i++) {
    if (i != 0) {
        setTimeout(function() { set[i].transitionOut($('#gallery'), 562) }, 100);
    } else {
        set[i].transitionOut( $('#gallery'), 562 );
    }
}

2.

for (i=0; i < set.length; i++) {
    if (i != 0) {
        function tempTransition() {
            set[i].transitionOut( $('#gallery'), 562 );
        }
        setTimeout(tempTransition, 100);
    } else {
        set[i].transitionOut( $('#gallery'), 562 );
    }
}

3.

for (i=0; i < set.length; i++) {
    if (i != 0) {
        setTimeout('function() { set[i].transitionOut($("#gallery"), 562) }', 100);
    } else {
        set[i].transitionOut( $('#gallery'), 562 );
    }
}

transitionOut():

jQuery.fn.transitionOut = function(parent, height) {
    this.animate({
        height: '0',
        top: height + 'px'
    }, function() {
        $(this).remove();
    });
}

حصلت عليه العمل باستخدام CMS إغلاق سبيل المثال.ولكن الآن أنا على التوالي في مشكلة جديدة.الانتقال يحدث فقط مع الصورة الثانية.عندما يكون هناك ثلاث صور سوف تذهب تحريك الصورة 1 من تأخير تحريك الصورة 2 تحريك الصورة 3.ليس هناك تأخير بين 2 و 3.

هنا القانون الجديد:

for (i=0; i < set.length; i++) {
    (function(i) {
        if (i != 0) {

            function tempTransition() {
                set[i].transitionOut( $('#gallery'), 562 );
            }
            setTimeout(tempTransition, 200);
        } else {
            set[i].transitionOut( $('#gallery'), 562 );
        }
    })(i);
}

Answer 1

من خلال النظر في التعليمات البرمجية الخاصة بك أعتقد لديك آخر إغلاق مشكلة, ولعل المشكلة الأكثر شيوعا رأيت عندما يعمل الناس مع الحلقات وظائف متداخلة.

على i المتغير الذي setTimeout وظيفة رد الاتصال الرجوع ، هو نفسه (لأن جافا سكريبت فقط وظيفة النطاق ، ليس كتلة نطاق), و هذه المهام يتم تنفيذها بشكل متزامن, الحلقة بالفعل الانتهاء ، و i المتغير سوف تحتوي على set.length - 1 في جميع الحالات حيث setTimeout يتم استخدامه.

كالعادة تحاول التقاط i متغير باستخدام آخر الإغلاق:

for (var i=0; i < set.length; i++) {
  (function (i) {
    if (i != 0) {
        setTimeout(function() { set[i].transitionOut($('#gallery'), 562) }, 100);
    } else {
        set[i].transitionOut( $('#gallery'), 562 );
    }
  })(i);
}

Answer 2

وعن طريق المهلة شيء خداع عندما يتعلق الأمر توقيت الرسوم المتحركة / الأثر.

لم أكن اختبار التعليمات البرمجية ولكن من خلال التصفح ذلك، وأنا لاحظت أنك تستخدم setTimeout دون أي شيء واضح لهم.

وماذا يحدث عندما يقوم المستخدمون تشغيل الأحداث أثناء "تأخير"؟ كنت قد حصلت على تنفيذ شيء لإدارتها على حد سواء.

وآسف لأنني لا أملك جوابا بالنسبة لك الآن، وربما عندما يكون لدي المزيد من الوقت في وقت لاحق أو أي شخص يخرج مع حل أكثر أناقة.

Answer 3

http://docs.jquery.com/Effects/fadeOut يتيح لك إنشاء الاستدعاء، وهي الوظيفة التي يمكن تشغيلها عند انتهاء الاختفاء التدريجي. حتى إذا كنت تريد أن تتمكن من سلسلة ليتلاشى معا حتى عند واحد ينتهي يدعو المرحلة التالية. إذا لم يكن هذا ما كنت أبحث عنه أنا يمكن قراءة خاطئة سؤالك.

وكما في المثال 3، أعتقد أنك تريد أن يكتب هذا القبيل، وليس لديها تعريف وظيفة تمريرها إلى setTimeout والتي من شأنها أن تفعل أي شيء.

setTimeout('set[i].transitionOut($("#gallery"), 562)', 100);