fadeIn arbeitet nicht mit .append ()

Question

Ich habe ein Verblassen Menü verstimmt, wenn Sie es so nennen. Das Problem, das ich habe ist alles in Ordnung schwindet das Bild außer ich bis zum Ende der Links am anhängen. Es blendet groß, aber ich kann nicht fadeIn zur Arbeit überhaupt bekommen.

$(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);
    }
);

});

Ändern der fadeIn Zeit tut nichts, und wenn Sie es sehen ein wenig man kann sagen, es ist nicht in Verblassen aber nur erscheinen. Alles andere funktioniert. Wenn jemand etwas Unterstützung hat, würde ich es wirklich schätzen. Dank!

Answer 1

Bearbeiten: original unten aus historischen Gründen

Ich habe dieses Problem gelöst habe, können Sie die Lösung finden können http://jsbin.com/hogantest/5 und natürlich sehen alle die Quelle und mit ihm spielen unter http://jsbin.com/hogantest/5/ bearbeiten

Da stop() funktioniert nicht mit fadeIn() und fadeOut() gibt es eine mit Funkyness die Pfeile kleben herum, wenn Sie den Mauszeiger schnell bewegen. Ich verlasse das Update für das OP.

Hier waren die Fragen und Lösung. Problem 1 wurde mit Stopp nicht richtig. Sie wollen nur Halt auf der Fade-Out Punkt verwenden. Dadurch wird die Einblendung stoppen und eine Fade-Out sofort beginnen. Auch (wie mein Original-Kommentar) mögen Sie zuerst, dann die Arbeit beenden.

Problem 2 war die dynamische Hinzufügen von Bildern im Schwebe. YIKES! Fügen Sie die Bilder in versteckt einmal und nur einmal, dann manipulieren sie.

Hier ist der relevante Teil des überarbeiteten Code:

$(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);
    }
  );

});​

, sagte Wie ich es immer noch ein Fix - erhalten von fadeIn() und fadeOut() und Verwendung belebtes befreien, so dass Sie stop() aufrufen können. Ich würde auch das img-Tag auf den ursprünglichen HTML-Code hinzufügen, gibt es keinen Grund, es dynamisch hinzuzufügen, es sei denn, dies ein Skript oder etwas in der Art fettaffe ist.

Original-Antwort

Das ist eine Vermutung, es ist spät, so teste ich es nicht ... bewegen, um den Anschlag () vor dem Bild Einblendung.

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);
    },