توقف عن الرسوم المتحركة JQuery قبل الأوان

Question

أحاول Fadein و Fadeout PNG شفافة باستخدام jQuery. بالطبع ، يبدو بقعة في Firefox ، ولكنه أقل بكثير من مقبول في IE (7 و 8). إنه خطأ معروف مع IE ، وللأسف لا يبدو أن هناك الكثير من الحل البديل.

في الأساس ما أفعله هو وضع مستطيل أبيض شبه شفاف على صورة لجعل الصورة تظهر "في الخلفية". أريد أن أفعل ذلك بسلاسة ، وهذا هو المكان الذي يأتي فيه فدين. بسبب علة IE ، ومع ذلك ، فقد اضطررت إلى fadein مستطيلًا أبيض غير شفاف تمامًا على الصورة بدلاً من ذلك ، مما يجعله يختفي للأسف. على الرغم من أن هذا يبدو أفضل بكثير وهو ما أبحث عنه تقريبًا ، إلا أنه لا يزال غير مقبول. يجب أن يكون المستخدم قادرًا على رؤية بعض الصور على الصفحة ، وإن كان ذلك في الخلفية.

لذا سؤالي هو هذا:

هل هناك طريقة لإيقاف وظيفة Fadein (أو أي رسوم متحركة jQuery ، حقًا) بعد أن تحرك 75 ٪ من وقت الرسوم المتحركة المتوقعة؟

هذا من شأنه أن يترك صورتي 75 ٪ خلط المستطيل الأبيض ، ولن أضطر إلى التعامل مع علة PNG الشفافة من IE.

شكرًا!

Answer 1

يمكنك استخدام صورة غير شفافة وتحريكها فقط إلى 75 ٪.

  $('#overlay').animate({
    opacity: 0.75
  }, 5000, function() {
    // Animation complete.
  });

Answer 2

بدلاً من fadein/fadeout ، استخدم تحريك وظيفة لتحريك خاصية العتامة إلى المستوى المطلوب.

Answer 3

يمكنك أيضا استخدام تتلاشى ل وظيفة.

هذا هو synthax:

.fadeTo( duration, opacity, [ callback ] )

Answer 4

لا ينصح بموقفك ، ولكن هنا الإجابة الفعلية على سؤالك كما هو موضح :-)

.stop( [ clearQueue ], [ jumpToEnd ] )

عندما يتم استدعاء stop () على عنصر ، يتم إيقاف الرسوم المتحركة التي تديرها حاليًا (إن وجدت) على الفور. على سبيل المثال ، إذا تم إخفاء عنصر مع .slideup () عند استدعاء. stop () ، فسيظل العنصر الآن يتم عرضه ، ولكن سيكون جزءًا صغيرًا من ارتفاعه السابق. لا تسمى وظائف رد الاتصال.

http://api.jquery.com/stop/