fadeIn que no trabajan con .Append ()

Question

Me armar un menú de decoloración de clases si quieres llamarlo así. El problema que estoy teniendo es todo se desvanece bien, excepto la imagen que estoy anexando a finales de los enlaces. Se desvanece muy bien, pero no puede llegar a fadeIn trabajo en absoluto.

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

});

Cambiar la hora fadeIn no hace nada y si se mira un poco se puede decir que no está desapareciendo pero sólo en aparecer. Todo lo demás funciona bien. Si alguien tiene algún tipo de asistencia que realmente lo apreciaría. Gracias!

Answer 1

editar: original, a continuación, por razones históricas

Tengo este problema resuelto, se puede encontrar la solución a http://jsbin.com/hogantest/5 y por supuesto ver toda la fuente y el juego con ella en http://jsbin.com/hogantest/5/ editar

Debido stop() no funciona con fadeIn() y fadeOut() hay un funkyness con las flechas quedarse allí si se mueve el puntero del ratón rápido. Les dejo el punto de referencia para la OP.

A continuación fueron los problemas y solución. Problema 1 no estaba usando correctamente parada. Sólo se desea utilizar parada en el fundido de salida artículo. Esto detendrá el fundido de entrada y comenzar un fundido de inmediato. También (como mi comentario inicial) desea detener primero y luego hacer el trabajo.

Problema 2 fue la dinámica de la adición de imágenes en el vuelo estacionario. ¡Ay! Añadir las imágenes en escondido una vez y sólo una vez, luego manipularlos.

Aquí está la parte correspondiente de la versión revisada del código:

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

});​

Como me dijo que todavía hay una solución - deshacerse de fadeIn() y fadeOut() y el uso animado para que pueda llamar stop(). También me gustaría añadir la etiqueta img para el código HTML original, no hay ninguna razón para agregar de forma dinámica a menos que esto es un script de grasa mono o algo por el estilo.

respuesta original

Esta es una suposición, es tarde, así que no estoy probando ... mover el stop () antes de que el desvanecimiento en la imagen.

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