fadeIn لا تعمل مع .إلحاق()

Question

لقد وضعت القائمة يتلاشى من نوع ما إذا كنت تريد أن نسميها.المشكلة أن أواجه كل شيء يتلاشى بشكل جيد ما عدا صورة أنا إلحاق إلى نهاية الروابط.فإنه يتلاشى كبيرة, ولكن لا يمكن الحصول على fadeIn للعمل على الإطلاق.

$(document).ready(function() {

$(".fade").hover(
    function () {
        $(this).fadeIn(500).append($("IMAGE HERE"));
        $(this).stop().animate({
            opacity: 1,
            borderBottomColor: "#6BD8FF",
            borderLeftColor: "#6BD8FF",
            borderRightColor: "#6BD8FF",
            borderTopColor: "#6BD8FF",
            color: "#03A5DF",
            backgroundColor: "#E3F8FF"
        }, 500);
    },
    function () {
        $(this).find("img:last").fadeOut(200);
        $(this).stop().animate({
            opacity: 1,
            borderBottomColor: "#CCCCCC",
            borderLeftColor: "#CCCCCC",
            borderRightColor: "#CCCCCC",
            borderTopColor: "#CCCCCC",
            color: "#BBBBBB",
            backgroundColor: "#F9F9F9"
        }, 200);
    }
);

});

تغيير fadeIn الوقت لا يفعل شيئا و إذا نظرت إليها قليلا يمكنك أن تقول إنه لا يتلاشى في ولكن مجرد الظهور.كل شيء يسير على ما يرام.إذا كان أي شخص لديه بعض المساعدة أنا حقا نقدر ذلك.وذلك بفضل!

Answer 1

تحرير:الأصلي أدناه لأسباب تاريخية

أنا عندي حل هذه المشكلة, يمكنك العثور على حل في http://jsbin.com/hogantest/5 و بالطبع نرى كل مصدر واللعب معها في http://jsbin.com/hogantest/5/edit

لأن stop() لا يعمل مع fadeIn() و fadeOut() هناك funkyness مع السهام الشائكة حول إذا قمت بنقل مؤشر الماوس سريع.أترك إصلاح العملية.

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

المشكلة 2 الديناميكية إضافة الصور في التحويم.ياه!إضافة الصور في خفية مرة واحدة فقط ، ثم التلاعب بها.

هنا هو الجزء ذي الصلة من القانون المعدل:

$(document).ready(function() {
  $(".fade").each( function() {
    $(this).append($("<img style='float:right;' src='http://cu3ed.com/jqfade/img/plus.png' />"));
    $(this).find("img:last").hide();
  });

  $(".fade").hover(
    function () {
      var me = $(this);

      me.find("img:last").fadeIn(500);

      me.animate({
        opacity: 1,
        borderBottomColor: "#6BD8FF",
        borderLeftColor: "#6BD8FF",
        borderRightColor: "#6BD8FF",
        borderTopColor: "#6BD8FF",
        color: "#03A5DF",
        backgroundColor: "#E3F8FF"
      }, 500);
    },
    function () {
      var me = $(this);
      me.stop();
      me.find("img:last").fadeOut(200);
      me.animate({
        opacity: 1,
        borderBottomColor: "#CCCCCC",
        borderLeftColor: "#CCCCCC",
        borderRightColor: "#CCCCCC",
        borderTopColor: "#CCCCCC",
        color: "#BBBBBB",
        backgroundColor: "#F9F9F9"
      }, 200);
    }
  );

});​

كما قلت لا يزال هناك إصلاح -- التخلص من fadeIn() و fadeOut() واستخدام تحريك حتى تتمكن من الاتصال stop().أود أن أضيف أيضا العلامة img الأصلي الكود, لا يوجد سبب إضافتها بشكل حيوي ما لم يكن هذا ميكانيكية النصي أو شيء من هذا القبيل.

الرد الأصلي

هذا تخمين, الوقت متأخر لذلك أنا لست اختبار...نقل stop() قبل أن تتلاشى الصورة في.

function () {
       var me = $(this);
       me.stop();
       me.fadeIn(500).append($("<img class='plus' src='img/plus.png' />"));
       me.animate({
            opacity: 1,
            borderBottomColor: "#6BD8FF",
            borderLeftColor: "#6BD8FF",
            borderRightColor: "#6BD8FF",
            borderTopColor: "#6BD8FF",
            color: "#03A5DF",
            backgroundColor: "#E3F8FF"
        }, 500);
    },