Jquery로 마우스 오버시 이미지를 순차적으로로드하는 방법

Question

최근에 주어진 클래스로 이미지를 순차적으로로드하고 페이지가로드 될 때 하나씩 페이드 인하는 멋진 작은 jquery 스크립트를 사용했습니다.

JQuery와

$(function() { 
$(".faded").hide()  
$(".faded").each(function(i) { 
    $(this).delay(i * 100).fadeIn(500); 
}); 
}); 

예 HTML

<div class="faded"><img class="someclass" src="images/example1.jpg" /></div> 
<div class="faded"><img class="someclass" src="images/example1.jpg" /></div> 
<div class="faded"><img class="someclass" src="images/example1.jpg" /></div> 
<div class="faded"><img class="someclass" src="images/example1.jpg" /></div> 
..... 

행동이의 예는 여기 http://comill.com/animation/

볼 수 있습니다 이것은 매우 될 것이라고 생각하고 저를 얻었다

이미지를로드하는 롤오버 또는 마우스 오버 스크립트를 만드는 것이 좋다. 비슷한 방법으로.

예를 들어 위의 데모 링크에서는 녹색 디스크 만 페이지에 표시되고 사용자가이 디스크를 가리키면 꽃잎이 하나씩 사라집니다. 이상적으로 꽃잎은 마우스 아웃시 모두 즉시 사라집니다.

저는 이것을 연구하면서 매우 간단해야한다고 생각했지만, 지금까지는 Google을 통해 검색하는 동안 솔루션을 찾지 못했지만 누군가가 솔루션을 제공 할 수 있다면 어떤 도움이라도 대단히 감사하겠습니다.

Answer 1

다음 코드를 스핀도

$(document).ready(function(){ 
    var faded = $(".faded"); 
    faded.hide(); 
    $('#midbut').hover(function(){ 
     // mouseenter 
     faded.each(function(i) { 
      $(this).delay(i * 100).fadeIn(500); 
     }); 
    }, function(){ 
     // mouseleave 
     faded.fadeOut(500); 
    }); 
}); 

당신이 그것을 할 수 있다면 유 jQuery로 요소를 숨기고하지 않아야을주고, 당신의 예를 들어 녹색 디스크 요소

에 .hover()를 사용 CSS 초기화 페이지