깜박임없이 배경 이미지를 원활하게 변경하는 방법?

div의 배경 이미지로 작동하는 여러 개의 연속 이미지가 있습니다.깜박임없이 배경 이미지를 원활하게 변경하는 방법?

이러한 이미지는 물의 수위가 다른 병 속의 물이며,이 이미지를 하나씩 변경하여 물이 천천히 올라가는 것처럼 보입니다.

그리고 여러 CSS 클래스에 이미지를 넣고 이미지를 변경할 때 :

.waterLevel1 { 
    background: url(path/to/my/image); 
}

내가 유사은 다음과 그 코드를 사용 :

$('#myDiv').addClass('waterLevel2').removeClass('waterLevel1');

그것은 이미지를 변경하는 일을합니까를, 그러나 때로는 변경 사항 사이에 깜박 거리기도했습니다.

깜박임을 피할 방법이 있습니까?

UPDATE

이미지가 그래서 그냥 괜찮 교체, 이미 GIF 사진입니다.

지금은 사진이 없습니다. jsfiddle을 (를) 유감스럽게 생각합니다.

출처

2014-04-25 Noah Blues

jsfiddle 많이 환영합니다! –

divs를 서로 겹쳐서 원하는 속도로 페이드 아웃합니다. – JakeGould

먼저 배경 이미지를 미리로드하십시오. –

간단한 솔루션은 여러 개의 divs을 사용하는 것입니다. 그럼 그냥 당신이 그것을 원하는 postion:relative을 설정 디스플레이의

<div class="waterLevelWrapper"> 
    <div class="waterLevel waterLevel1" style="display:block;"></div> 
    <div class="waterLevel waterLevel2" style="display:none;"></div> 
    <div class="waterLevel waterLevel3" style="display:none;"></div> 
    <div class="waterLevel waterLevel4" style="display:none;"></div> 
    <div class="waterLevel waterLevel5" style="display:none;"></div> 
</div>

확인 .waterLevelWrapper 크기를 변경합니다. 그런 다음 .waterLevel 크기로 래퍼를 채우고 position:absolute으로 설정합니다.

이제는 필요에 따라 각 div를 반복/숨기기/표시 할 수 있습니다.

출처

2014-04-25 14:33:05 Randy

나는 당신이 디스플레이 속성을 애니메이트 할 수 있다고 생각하지 않는다. 대신에 페이딩 인/페이드 아웃처럼 보이도록 애니 메이팅 할 수있는'opacity'를 사용한다. 간단한 애니메이션의 경우 'transition : all 1s;'을 추가하십시오. –

오른쪽. 'display'는 그것을 숨기거나 보여줍니다. 'display','transition','opacity','z-index'의 조합을 사용하여 의도 한대로 희미해질 것입니다. – Randy

-3

먼저 배경 이미지를 미리로드하십시오.

// put this in a javascript file, preferably before the closing </body> tag. 
(function(){ 
    var imgPathArr = ["/path/to/image.jpg","/path/to/another/image.jpg"], i, img; 
    for (i = 0; i < imgPathArr.length; i++) { 
     img = new Image(); 
     img.src = imgPathArr[i]; 
    } 
})();

이제 수업을 전환 할 때 스왑을 수행하기 위해 더 이상 이미지를 다운로드 할 필요가 없기 때문에 즉시 처리해야합니다.

출처

2014-04-25 14:38:57

이미지가 사전로드되었지만 깜박임이 여전히 존재합니다. –

깜박임없이 배경 이미지를 원활하게 변경하는 방법?

답변

관련 문제