yavaşça <code><img src="one.png" id="one" onMouseOver="animateThis(this)"></code></p> <p>Ben kullanıcı jQuery kullanarak üzerine geldiğinde yavaşça bu görüntü src için "oneHovered.png" değiştirmek istiyorum, bu benim img olduğunu JQuery

Question

ile değişen bir görüntü animasyon/fade/değiştirin. Bunu yapmak için en iyi jQuery yöntemi hangisidir? Gördüğüm birçok örnek CSS arka planını değiştirmemi istiyor. Src özniteliğini doğrudan değiştirecek bir şey var mı?

Answer 1

İlk isteğe bağlı parametreyi kullanarak, ilk önce görüntüyü silerek ve geri çekilme süresini kontrol ederek başlayabilirsiniz. Solukluk tamamlandıktan sonra, anonim geri arama tetiklenir ve görüntünün kaynağı yenisiyle değiştirilir.

Orijinal HTML:

<img src="one.png" id="one" /> 

JavaScript: jQuery kullanarak Nihayet

$('#one').hover(function() { 

    // increase the 500 to larger values to lengthen the duration of the fadeout 
     // and/or fadein 
    $('#one').fadeOut(500, function() { 
     $('#one').attr("src","/newImage.png"); 
     $('#one').fadeIn(500); 
    }); 

}); 

, çok, var çok daha kolay için Sonrasında biz milisaniye cinsinden ölçülür başka süre değeri kullanarak görüntüdeki solmaya HTML üzerinde herhangi bir JavaScript özelliğini kullanmadan JavaScript olaylarını dinamik olarak bağlayın. Orijinal img etiketini değiştirdim, böylece yalnızca src ve id öznitelikleri var.

jQuery hover olayı, kullanıcı fareyle görüntü üzerinde gezinirken işlevin çalışmasını sağlar.

Daha fazla bilgi için, bkz. jQuery fadeOut ve jQuery fadeIn. Görüntü yükleme süreleri ile

Olası sorunlar:

bir kullanıcının bir resmin üzerine süpürdü ve bunun için bir istekte gerçek fadeIn hafif aksaklık olabilir İlk defa ise, orada olacak beri newImage.png isteğinde bulunurken sunucudan gecikme olmak. Bunun için bir geçici çözüm bu resmi önceden yüklemektir. StackOverflow on preloading images'da çeşitli kaynaklar var.

Answer 2

@ jmort253'e ek olarak, solmadan önce min-height eklerseniz iyi olur. Aksi takdirde, özellikle duyarlı görüntüler için sarsıntı görebilirsiniz.

Benim önerim jquery ile resim kaynağını değiştirirken

$('#one').hover(function() { 
    // add this line to set a minimum height to avoid jerking 
    $('#one').css('min-height', $('#one').height()); 
    // increase the 500 to larger values to lengthen the duration of the fadeout 
     // and/or fadein 
    $('#one').fadeOut(500, function() { 
     $('#one').attr("src","/newImage.png"); 
     $('#one').fadeIn(500); 
    }); 

}); 

Answer 3

bu

<img class="product-images-cover" src="~/data/images/productcover.jpg" /> 
<div class="list-images-product"> 
<div> 
    <img class="thumbnail" src="~/data/images/product1.jpg" /> 
</div> 
<div> 
    <img class="thumbnail" src="~/data/images/product2.jpg" /> 
</div> 
</div> 

$(document).ready(function() { 
    $(".list-images-product .thumbnail").click(function (e) { 
     e.preventDefault(); 
     $(".product-images-cover").fadeOut(250).attr("src", $(this).attr('src')).fadeIn(250); 
    }); 
}); 

Answer 4

denemek olurdu, bazı titreyen etkileri sonuçlanan bir yükleme süresini alır. Sorunu çözmek için yukarıdaki kodu değiştirdim.

$(".list-images-product .thumbnail").fadeTo(1000,0.30, function() { 
    $(".list-images-product .thumbnail").attr("src",newsrc); 
    $(".list-images-product .thumbnail").on('load', function(){ 
    $(".list-images-product .thumbnail").fadeTo(500,1); 
    }); 
});