görüntüleri image.Me üzerinde fareyi birini deneyin ama onun değişim i image.My üzerinde vurgulu üzerinde birçok görüntü nasıl değiştirdiğini tek görüntü çalıştığımda değiştirmek için birçok görüntüleri ihtiyaç jquery

Question

onHover değiştirmek fiddle

HTML:

<div id="container"> 
<div class="fimg"><a href="#"><img height="130px" width="100%" src="a.jpg" alt="" /></a> 
</div> <div class="simg"> 
<a href="#"><img height="130px" width="100%" src="A.jpg" alt="" /><p class="text_over_image" style="font-size:36px;">TEXT</p></a> 
</div> 

JavaScript: Eğer doğru sorununuzu anlıyorum Eğer container üzerine getirdiğinizde

$(function(){ 
    $("#container").hover(function(){ 
     $("img", this).stop().animate({top:"-130px"},{queue:false,duration:200}); 
    }, function() { 
     $("img", this).stop().animate({top:"0px"},{queue:false,duration:200}); 
    }); 
}); 

Answer 1

, bir görüntü kaydırıcı istiyorum.

Resimler satır içi bloğudur; bunlar white-space: nowrap olarak ayarlanmıştır. Böylece sarılmıyorlar. container, overflow: hidden olarak ayarlanmıştır, ekstra görüntüleri gizler.

Görüntüler, iç divın margin-left'u canlandırarak gösterilir. Yani, iç konteynerin hareket ettiği gibi ama konteyner hala duruyor.

İsterseniz, dikey animasyon, css geçişlerini ve malzemelerini kullanarak değiştirebilirsiniz.

Görüntülerin kısaltılmış URL'si nedeniyle kodu buraya gönderemiyorum.

here, bir kalemdir test edebilir ve değiştirebilirsiniz.