jQuery Vurgulu görüntü değiştirme animasyonu

Question

Gri ​​tonlamalı bir görüntüye sahip bir IMG etiketim var. Vurguluda renkli görüntüye geçmek için "src" yi değiştirmek ve fareyle üzerine gri tonlamaya geri dönmek için bir Hover() olayı bağladım.

Ancak bu değişim ani, gayet güzel çalışıyor. Rengi solmaya ve kaybolmaya neden olacak şekilde hafif bir fadeIn() eklemek istiyorum. Çalışacağını düşündüğüm aşağıdakileri yazdım, ama yapmıyor. (Görüntü değişir, ancak efektin kaybolmaması veya gecikmesi yoktur). Neyi yanlış yapıyorum?

  $("#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

İşte

birkaç çözümleridir var bu

$("#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'); 
      } 
     );​ 

ile deneyin. Kodunuz çalışmıyor çünkü görüntüyü hemen değiştiren kaynağı ayarlıyorsunuz.Her iki görüntüyü yüklemek, bunları CSS ile kaplamak ve ardından ana kapsayıcının üzerine geldiğinde rengi dışarıda bırakmak daha kolay olabilir. Alternatif çapraz olabilir, fare üstüne

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

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

çapraz fad onları

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>​ 

solmaya solma E

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

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

Answer 2

$(this).fadeIn('slow', 

aslında bu elemanda solmaya çalışıyor, yavaş yavaş ve 'bu' da geçerli gri tonlama üzerinde doğrudan renkli bir resim koyabilirsiniz istiyorum Yerine eğer

$("#showForm") 

atıfta görüntü ve renk resmini gizli olarak işaretleyin, sonra yavaşça soluklaştırın. Yapabilecekleriniz üst üste yerleştirilmiş olduğunuzu varsayalım:

); html varsayarak

gibi bir şey (sameAbsolutePosition belki aynı kesin nokta koymak için css, bir şey konum gibi olduğu: absolute; left: 20; top: 20px;): Şu

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

tekrarlamak, başka bir resmin üstünde yeni bir görüntü solduracaksınız. Gri tonlamalı görüntüyü aynı anda da azaltabilirsiniz.

Answer 3

Nerede dışarı kayboluyor? Fade 100'den sonra 0.

değişen donukluk ile 0 dışarı 100. Fade değişen donukluk ile display:block yapar display:none yapar içinde, sen fadeIn, bir animasyon görmüyorum, resim display:block ve donukluk Yani 100'dür . Yani, ya bir ekran yapın: Bir daha ya da fadeOut tekrar fadeIn önce. Verilen

şeyleri açıklıyor ile örnektir. Gereksinimlerinize göre değiştirmelisiniz.

$("#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

Çok daha iyi bir çözüm:

bu işi yapmak için javascript unut. Bunun yerine CSS sprites kullanın. FadeIn, fadeOut, geçişler kullanma konusunda ısrar ediyorsanız.

UPDATE: Todd'un hareketli grafiğindeki boyutları ve konumları tahmin etmenin bir yolu olmadığından, aşağıdaki yorumlara yanıt veremem, bazı kodları yazamıyorum. Ayrıca önerimin sprite'ı kullanmak olduğunu ve daha sonra sadece geçişleri değil “işlevselliği” geliştirmek için geçişler olduğunu açıklığa kavuşturmak istiyorum, çünkü bunun IE8 ve IE9'da çalışması gerektiğine inanıyorum.

Answer 5

İşte Fiddle

Answer 6

Sen de geçişi kullanarak CSS3 ile bu belirme çapraz yapabilirdi. Tüm tarayıcılar için kullanılabilir değil ama yine de ... Benzer şekilde http://www.w3schools.com/css3/css3_transitions.asp

Örneğin CSS: image link, change on hover

için:

#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'); 
}