FadeIn Fadeout mit JQuery mit einem Twist

Question

Ich versuche, ein Schweben über Maßnahmen zu schaffen, die in einem farbigen Bild bringt und auch einmal die Hover entfernt wird es blendet zurück in seine ursprünglichen Bild.

Ich habe es bis zu dem Punkt mit Hilfe Funka und Brad auf diesem Forum im ersten Bild Fading aber ich brauche es zu bekommen, so dass es blendet, wenn Sie schweben aus.

Zur Zeit blendet sie das Bild so gut wie nichts aus und blendet dann die neuen in. Dies wird dann an Ort und Stelle bleiben, unabhängig davon, ob ich schwebe weg oder nicht.

Id wie es so scheint es, wie das Farbbild durch die Schwarz-Weiß eines Verblassen als apposed 0 gegen das Verblassen, bevor in Verblassen ... sowie zurückkehren, sobald die Hover entfernt werden.

Jede Hilfe wäre sehr geschätzt.

//Loop through the images and print them to the page
   for (var i=0; i < totalBoxes; i++){
    $.ajax({
     url: "random.php?no=",
     cache: false,
     success: function(html) {
      // following line I originally suggested, but let's make it better...
      //$('#bg').append(html).fadeIn('slow');
      // also note the fine difference between append and appendTo.
      var $d = $(html).hide().appendTo('#bg').fadeIn('slow');
      $('img', $d).hover(function() {
       var largePath = $(this).attr("rel");
       $(this).fadeOut("slow", function() {
        $(this).attr({ src: largePath }).fadeIn("slow");
       });
      });
     }
    });
   }

Answer 1

Ihre Hover hat nur eine Mouseover-Funktion - etwas auf mouseout ...

zu tun

$('img', $d).hover(function() {
    //This is the mouseover function
    var largePath = $(this).attr("rel");
    $(this).fadeOut("slow", function() {
        $(this).attr({ src: largePath }).fadeIn("slow");
    }
    );
},
function() {
    //This is the mouseout function!  Do something here!
});

Answer 2

Ich weiß nicht wirklich jQuery aber der folgende Code, wenn, was ich habe mit und klingt wie das, was Sie nachher sein könnten. Ich benutze es mit Sprite-Bildern, die störende Flimmern zu stoppen, die in einigen Browsern angezeigt wird.

$(function() {
    $(".fadebtn")
    .find("span")
    .hide()
    .end()
    .hover(function() {
            $(this).stop(true, true).find("span").fadeIn(600);
    }, function() {
            $(this).stop(true, true).find("span").fadeOut(200);
    });
});