이미지 표시 지연은 한 번만 작동합니다.

Question

페이지의 특정 이미지 표시를 지연해야하는 상황이 있습니다. 이 페이지는 미국의 이미지지도입니다. 사용자가 주를 클릭하면 jQuery를 사용하는 오버레이가지도 위에 열려 해당 주 정보가 표시됩니다.

여기에 문제가되는 이미지는 해당 오버레이 안에 있지만 위치는 고정으로 설정되어 스크롤하지 않습니다. 오버레이가 나타나기 전에 오버레이 상단에 나타납니다. 따라서 약간 지연됩니다. 그 부분은 잘 작동합니다. 여기에 내 코드입니다 :

$(document).ready(function() { 
    setTimeout(function(){ 
     $('.scrollInst').fadeIn(500); 
    }, 3000); 

    });  

문제는 사용자가를 닫 오버레이에 닫기 (X) 버튼을 클릭 할 때, 이미지의 지연 페이드 지연 및 페이드 모든 후속 오버레이이 중지한다는 것입니다. 사용자가지도에서 다른 상태를 클릭하여 열면 지연 및 페이드 인이없이 이미지가 표시됩니다. 즉, 완전히 멈추고 이미지가 지연/fadeIn으로 해결 된 원래 문제 인 오버레이보다 먼저 팝업됩니다.

div를 원래 상태로 '재설정'하여지도에서 다음 상태를 클릭하고 새 오버레이가 튀어 오르면 이미지가 지연되고 페이드 인합니다. 첫 번째 오버레이.

fadeOut() 및 hide()를 닫기 단추에 추가하여 해당 div를 재설정하겠다고 생각했지만 닫기 단추를 클릭 한 후에 div를 다시 표시하지 않도록했습니다.

$(".close").click(function(){ 
    $(this).parents(".overlay").hide("scale", 300, function(){ 
$('.scrollInst').css('display','none'); 
}); 

아이디어가 있으십니까?

한편 ... 이것은 일반적인 웹 사이트가 아닙니다. 태블릿에로드 된 로컬 사본에서 표시됩니다. 사용중인 브라우저 (Dolphin)는 CSS 전환에 사용할 수 없으므로 문제는 아닙니다.

Answer 1

코드 예제가 도움이 될 것입니다. 그러나 나는 그 문제를 이해하고 있다고 생각한다. 다음은 몇 가지 핵심 사항입니다.

A. 초기 지연을 위해 setTimeout이 필요하지 않습니다. jQuery에는 "delay()"메소드가 내장되어 있습니다.

$('.scrollInst').delay(300).fadeIn(500); 

B. "재설정"이라고하면 DIV의 HTML 콘텐츠 또는 div의 CSS 값을 의미합니까? 단순히 "CSS()"메소드로 값을 변경하여 일 "재설정"할 수

$('.whatever-selector').html(""); 

CSS : HTML의 내용을 재설정 할 수 있습니다.

$('.whatever-selector').css({top: 0, left: 0, etc}); 

C. 전반적으로 귀하의 접근 방식은 다소 벗어날 수 있습니다. 무슨 일이 일어날 지,지도의 요소를 클릭하면 jQuery가 오버레이 div를 만들고 DOM에 삽입 (불투명도 0이므로 보이지 않습니다) 한 다음 페이드 인을 사용하여 페이지에 적절히 애니메이션을 적용합니다. 닫을 때는 페이드 아웃해야하고 다음 오버레이의 내용을 비 웁니다.

희망이 있습니다.