Non fadeIn lavorare con .Append ()

Question

ho messo insieme un menu dissolvenza di sorta, se si vuole chiamarlo così. Il problema che sto avendo è tutto sfuma bene, tranne l'immagine che sto aggiungendo alla fine dei collegamenti. E scompare grande, ma non riesco a fadeIn di lavoro a tutti.

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

});

Modifica del tempo fadeIn non fa nulla e se si guarda un po 'si può dire che non è dissolvenza in, ma solo apparire. Tutto il resto sta lavorando bene. Se qualcuno ha qualche aiuto Vorrei davvero apprezzare. Grazie!

Answer 1

modifica: originale di seguito per ragioni storiche

Ho questo problema risolto, è possibile trovare la soluzione a http://jsbin.com/hogantest/5 e, naturalmente, vedere tutto la fonte e giocare con lui a http://jsbin.com/hogantest/5/ Modifica

A causa stop() non funziona con fadeIn() e fadeOut() c'è un funkyness con le frecce attaccare in giro se si sposta puntatore del mouse veloce. Lascio la correzione per l'OP.

Qui sono stati i problemi e le soluzioni. Problema 1 non era con fermata correttamente. Si desidera solo utilizzare fermata sulla voce fade out. Questo fermerà il fade in e fade out iniziare una subito. Inoltre (come il mio commento originale) si vuole fermare prima poi fare il lavoro.

Problema 2 è stata la dinamica aggiunta di immagini del passaggio del mouse. YIKES! Aggiungere le immagini in nascosti una volta e solo una volta, poi manipolarli.

Questa è la parte rilevante del codice rivisto:

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

});​

Come ho detto non v'è ancora una correzione - sbarazzarsi di fadeIn() e fadeOut() e utilizzare animare in modo da poter chiamare stop(). Vorrei anche aggiungere il tag img per il codice html originale, non c'è motivo di aggiungere in modo dinamico a meno che questo è uno script di grasso scimmia o qualcosa del genere.

risposta originale

Questa è una supposizione, è in ritardo così io non sto testando esso ... spostare la fermata () prima della dissolvenza dell'immagine in.

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