fadeIn 내가 이미지를 페이드 아웃하고 새로운 이미지에 페이드이 스크립트를 사용하고

Question

이미지 (jQuery를) 페이드 아웃 중앙 수 없습니다 : 나는 페이지의 상단 중앙에 표시 할 이미지를 원하는

$(document).ready(function() { 
    $('#picOne').fadeIn(500).delay(2000).fadeOut(1500); 
    $('#picTwo').delay(3500).fadeIn(1000); 
}); 

을 내가 위치를 사용하는 경우

#picOne, #picTwo { 
    position: absolute; 
    display: none; 
} 

:하지만 나는이 CSS 사용하지 않는 한, 이미지가 같은 장소에 표시 얻을 수 #picOne, picTwo에 대한 상대를, 나는이 이미지를 중심으로 수 있지만, picTwo 페이드 인 (pade in)으로 picOne 아래에 1 초 동안 나타납니다. 나머지 내용은 엉망이되어 우스꽝스럽게 보입니다. position : absolute를 사용하면이 문제가 해결되지만 중심에 올리는 것은 불가능합니다.

는

나는 사업부에 두 이미지를 포장하는 것이 도움이 될 것이라고 생각하지만, 변화 할 것 같지 않습니다

<div id="pics"> 
<%= image_tag 'egg.png', :id => 'picOne' %> <%= image_tag 'egg2.png', :id => 'picTwo' %>​ 
</div> 

#pics { 
     position:relative; 
     display: block; 
     margin-left: auto; 
     margin-right: auto; 
    } 

어떤 생각을? 당신의 도움을 주셔서 감사합니다!

Answer 1

당신이 시도 할 수 다음 #picTwo 후 #picOne 페이드 아웃 fadeIn() 것

$(document).ready(function() { 
    $('#picOne').fadeIn(500).delay(2000).fadeOut(1500, function() { 
     $('#picTwo').fadeIn(1000); 
    }); 
}); 

합니다. 그래서, 그들은 같은 공간에 남아있을 것입니다. 하지만 그것은 당신의 코드에서 두 이미지가 동시에 나타나는 것처럼 보이므로 공간과의 충돌이 있습니다.

이미지를 중앙에 정렬하려면 CSS text-align:center을 사용할 수 있습니다. See here.