벽돌집 JQuery 용 롤오버 애니메이션

Question

내 웹 사이트에 jquery masonry를 사용하고 있습니다. http://zakiyadavidson.com.

http://damiencorrell.com/에있는 것과 같은 롤오버 효과를 원합니다. 내 마지막 결과는 그림 텍스트를 롤오버 할 때 나타납니다.

이

#image_holder1 { 
overflow: hidden; 
} 

.image1 { 
position: absolute; 
}​ 

석공 술의 HTML은 다음과 같습니다 : 나는 아래의 CSS 블록에 추가 JS 위의 코드와 함께

//Set div dimensions equal to image's dimensions: 
$('#image_holder1').width($('#image_1').width()); 
$('#image_holder1').height($('#image_1').height()); 
$('#image_1').each(function(){ 
//set css of right: 
$(this).css({right: '-' + $(this).width() + 'px'})}) 
    //tell the browser what to do when hovering on the div: 
    $('#image_holder1').hover(function() { 
    //when mouse hover: 
$('#image_0').animate({ 
    right: '-' + $(this).width() + 'px' 
}, /*duration*/ 360, /*ease*/ 'swing'); 
$('#image_1').animate({ 
    right: '0px' 
}, /*duration*/ 360, /*ease*/ 'swing'); 
}, 

function() { 
//when mouse out, no hover: 
$('#image_0').animate({ 
    right: '0px' 
}, /*duration*/ 360, /*ease*/ 'swing'); 
$('#image_1').animate({ 
    right: '-' + $(this).width() + 'px' 
}, /*duration*/ 360, /*ease*/ 'swing'); 
});​ 

:

나는 아래의 js 코드에 추가하는 시도 위의 추가 변경 :

<div class="box photo col3" id="image_holder1"> 
    <img id="image_0" src="image_17.jpg" title="Family First" alt="Family First" /> 
    <img id="image_1" src="image_17Hover.jpg" /> 

...

마우스를 올려 놓은 상태에서 이미지가 표시되는 것이 아니라 페이지를로드하면 곧 볼 수 있습니다. 벽돌 레이아웃이 제대로 정렬되지 않았습니다. onload 이벤트 아래에 함수가 있기 때문에 그렇습니까? 어떤 도움이라도 대단히 감사합니다.

Answer 1

나는 그것을 알아 냈다!

간단한 Jquery 스크립트가 속임수를 쓰며 필요한만큼 많은 사진을 찍을 수 있습니다!

<script> 

jQuery(function() { 
$(".imgSwap img").hover(function() { 
    this.src = this.src.replace("_off", "_on"); 
}, function() { 
    this.src = this.src.replace("_on", "_off"); 
}); 
}); 

</script> 

다른 사람들에게 도움이되기를 바랍니다.

내 사이트로 이동하여 작업 스크립트를 확인할 수 있습니다 http://zakiyadavidson.com