jQuery Hover animacja zmiana obrazu

Question

mam tag IMG ze skali szarości. Podłączyłem zdarzenie Hover(), aby zmienić "src" na obraz kolorowy po najechaniu kursorem i wrócić do skali szarości po wyjściu myszy.

To działa dobrze, jednak zmiana ta jest nagłe. Chciałbym dodać do efektu niewielką fadeIn(), aby kolor zanikał i znikał. Napisałem następujące, które według mnie działały, ale nie działają. (Obraz zmienia się, ale nie ma efektu zanikania ani opóźnienia). Co ja robię źle?

  $("#showForm").hover(
       function() { 
       $(this).fadeIn('slow', function(){ 
        $(this).attr("src", 'images/AddButtonSmall.gif'); 
       }); 
       }, 
       function() { 
       $(this).fadeIn('slow', function(){ 
        $(this).attr("src", 'images/AddButtonSmallGray.gif'); 
       }); 
       } 
      ); 

Answer 1

Oto kilka rozwiązań. Twój kod nie działa, ponieważ ustawiasz źródło, które natychmiast zmienia obraz.Najprościej jest po prostu załadować oba obrazy, nałożyć je na CSS, a następnie zaniknąć jeden z nich, gdy pojemnik nadrzędny jest poddany mumii. Ewentualnie można przejechać na blaknięcie im

css

.fader { display: inline-block; } 
.fader img:last-child { 
    position: absolute; 
    top: 0; 
    left: 0; 
    display: none; 
}​ 

html

<div class="fader"> 
    <img src="http://placehold.it/300x300/000fff" /> 
    <img src="http://placehold.it/300x300/fff000" /> 
</div>​ 

fade in po najechaniu myszą

http://jsfiddle.net/Xm2Be/3/

$('.fader').hover(function() { 
    $(this).find("img:last").fadeToggle(); 
});​ 

przekroju moda e

http://jsfiddle.net/Xm2Be/2/

$('.fader').hover(function() { 
    $(this).find("img").fadeToggle(); 
});​ 

Answer 2

$(this).fadeIn('slow', 

jest rzeczywiście próbuje znikną w tym elemencie, powoli, a „ta” odnosi się do

$("#showForm") 

Zamiast jeśli chcesz można umieścić kolorowy obraz bezpośrednio na aktualnej skali szarości obraz, i zaznacza obraz kolorowy ukryty, wtedy powoli zanikać w założeniu są one umieszczone na szczycie jednego innego można zrobić.

$("#showForm").hover(
    function() { 
     $("#colorImageID").fadeIn(); 
    }, 
    function() { 
     $("#colorImageID").fadeOut(); 
    }); 
    } 

);

zakładając HTML jest coś jak (gdzie sameAbsolutePosition jest CSS, aby umieścić je w tym samym dokładnie w miejscu, więc może coś position: absolute; left: 20; top: 20px;):

<img src='images/AddButtonSmallGray.gif' class="sameAbsolutePosition"> 
<img src='images/AddButtonSmall.gif' style="display:none;" class="sameAbsolutePosition"> 

Aby powtarzam, będziesz gasić nowy obraz na drugim obrazie. Można również jednocześnie zniknąć z obrazu w skali szarości.

Answer 3

Dokąd zanikaniem? Przenikanie robi display:block z kryciem zmieniającym się od 0 do 100. zanikanie robi display:none z kryciem zmieniającym się od 100 do 0.

raz, fadeIn, obraz jest display:block i krycie jest 100. Tak więc, nie widzisz animacji . Więc, albo zrobić display: none lub Fadeout przed fadeIn ponownie.

Podano przykład z wyjaśnia rzeczy. Powinieneś go zmienić zgodnie z własnymi wymaganiami.

$("#showForm").hover(
       function() { 
       $(this).fadeOut('fast').fadeIn('slow', function(){ 
        $(this).attr("src", 'images/AddButtonSmall.gif'); 
       }); 
       }, 
       function() { 
       $(this).fadeOut('fast').fadeIn('slow', function(){ 
        $(this).attr("src", 'images/AddButtonSmallGray.gif'); 
       }); 
       } 
      ); 

Answer 4

Znacznie lepszym rozwiązaniem:

Zapomnij o javascript, aby wykonać to zadanie. Zamiast tego użyj CSS: sprites. Jeśli nalegasz na fadeIn, fadeOut, użyj przejść.

UPDATE: Odpowiadając na komentarzach poniżej, nie mogę napisać trochę kodu, ponieważ nie ma sposobu, mogę przewidywać wymiary i pozycje w ikonki Todda. Chcę również wyjaśnić, że moja sugestia polega na użyciu sprite'ów, a następnie przejść, aby ulepszyć "funkcjonalność", a nie tylko przejścia, ponieważ zakładam, że potrzebuje tego do pracy w IE8 i IE9.

Answer 5

Spróbuj z tym

$("#showForm").hover(
      function() { 
       $(this).fadeOut('fast',function(){ 
       $(this).attr("src", 'images/AddButtonSmall.gif'); 
       $("#img_src").html("images/AddButtonSmall.gif"); 
       }); 
      $(this).fadeIn('fast'); 
      }, 
      function() { 
      $(this).fadeOut('fast',function(){ 
       $(this).attr("src", 'images/AddButtonSmallGray.gif'); 
       $("#img_src").html("images/AddButtonSmallGray.gif"); 
       }); 
      $(this).fadeIn('fast'); 
      } 
     );​ 

Oto Fiddle

Answer 6

można zrobić to cross fade z użyciem CSS3 przejścia zbyt. Niedostępne dla wszystkich przeglądarkach, ale wciąż ... http://www.w3schools.com/css3/css3_transitions.asp

W podobny sposób do CSS: image link, change on hover

Na przykład:

#showForm 
{ 
    background: transparent url('images/AddButtonSmallGray.gif') center top no-repeat; 

    -webkit-transition:all 0.3s ease-in-out; 
    -moz-transition:all 0.3s ease-in-out; 
    transition:all 0.3s ease-in-out; 
} 

#showForm:hover { 
    background-image: url('images/AddButtonSmall.gif'); 
}