مسج :صورة الإبهات المتداخل عند التمرير

Question

أحاول تنفيذ برنامج نصي "fade into" والذي قد يؤثر على صورتين:

<script type="text/javascript">

  $(document).ready(function(){

        $('img').mouseover( function() {

              $(this).fadeOut(200, function() {

                    $(this).attr({'src':'http://example/images/image.png'});

               if (this.complete) $(this).fadeIn(500);

              });
        });

  });

</script>

هذا الجزء من jQuery يعطيني ما يلي:

1 - أولاً تتلاشى الصورة وتختفي 2 - ثم ، من مساحة فارغة ، تظهر تلك الجديدة.

لذلك أود تحسين النص للحصول على تأثير "التلاشي" الحقيقي.

هناك مصدران رائعان قمت باستكشافهما الآن:

• البرنامج المساعد للدورة - رائع جدًا (سأحاول الحصول على تأثير الدورة عند التمرير)
• مسج للمصممين رائع، ولكن واجهت مجموعة من المشكلات مع IE (حدود سوداء غريبة منقطة على FadeIn).

شكرًا جزيلاً إذا كان بإمكان أي شخص أن يشير إلى حل إضافي في نهاية المطاف.

يناير

يحرر :خدعة / حل CSS هنا http://paragraphe.org/stackoverflowdemos/crossfade-images/

Answer 1

لقد وجدت مؤخرًا حلاً يركز على CSS:وضع صورة تمامًا "فوق" صورة أخرى، وتلاشيها إلى 0 مع إعداد jQuery على المستند، وتلاشيها بالكامل عند تمرير الماوس / التلاشي مرة أخرى إلى 0 عند إخراج الماوس.

Answer 2

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

قد يكون المزيد من الحظ مع هذا

$('img').mouseover( function() {
          $(this).fadeOut(200);
          $(this).attr({'src':'http://example/images/image.png'});
          if (this.complete) $(this).fadeIn(500);
        });

على الرغم من أنك ستظل متأثرًا بوقت تحميل الصورة الثانية ما لم يتم تحميلها مسبقًا في مكان ما.

Answer 3

هذا نوع من الإصلاح المطول، لكن هذا ما أفعله للحصول على تلاشي سلس.أستخدم Fadeout، ثم كرد اتصال، أستخدم $.ajax لتحميل صورة جديدة فعليًا، ثم أستخدم النجاح:دالة ذلك لإضافة div (أو img) ثم استخدم الكامل:وظيفة لتتلاشى فيه.وينتج عن ذلك إجراء Fadeout-newcontent-fadein السلس.

فيما يلي مثال لتحميل ملف PHP، المبدأ هو نفسه مع الصورة:

$("#leftbar").fadeOut("normal", function() {
$.ajax({
    url: "bin/leftBar.php",
    cache: "false",
    success: function(data) {
        $("#leftbar").html(data);
    },
    complete: function() {
        $("#leftbar").fadeIn("normal");
    }
});