JQuery : 여러 객체를 페이드 아웃 한 후 페이드 인하면 깜박임

Question

이 프로젝트에서는 상자 (div), 정적 컨텐트 (탭 포함) 및 다양한 조건 (클릭, 및 타이머). 이 동적 컨텐츠 뷰는 각각 별도의 div에 있습니다.

페이지의 초기로드를 포함하여 모든 경우를 처리 할 수있는 함수를 작성하려고합니다. 모든 동적 콘텐츠가 처음에는 CSS로 숨겨져 있기 때문입니다. 이 함수는 부모 상자를 취합니다. 부모 상자는 사물을 추적하기 위해 수정해야하며 변경할보기가 있어야합니다.

그래서 처음에는 모든 뷰를 페이드 아웃시켜 아무것도 존재하지 않게하고 새로운 뷰를 페이드 인합니다. 콜백이 순서대로 작동하지 않는다는 것을 곧 깨닫게되어 promise() 함수를 돌았습니다 . 불행히도, 내가 시도한 모든 브라우저 (IE, Chrome 및 Firefox)에서 깜박임이 발생합니다. 크롬에서는 모든 경우가 매우 빈번했으나 다른 경우에는 거의 일정했습니다.

$(container).children('.content_view').fadeOut(transition); 
$(container).children('.content_view').promise().done(function() { 
    $(next).fadeIn(transition); 
}); 

현재 내 코드의 비즈니스 끝입니다. 이를 수행하는 더 좋은 방법이 있습니까, 아니면 깜박임 현상을 제거하는 방법이 있습니까? 불행히도이 페이지는 오작동하는 브라우저에서 주로 볼 수 있습니다.

지연을 가지고 놀고 난 후, 나는 타이밍이 문제라고 생각한다. 요소의 조기 제거 또는 다른 레이아웃의 출현으로 인해 최종 레이아웃에 도달 할 때까지 레이아웃이 일시적으로 변경됩니다. 나는 promise() 함수가 그러한 지연을 구현한다고 의심한다.

편집 :

나는 저에게 잘 맞는 해결책을 발견했습니다. 초기 페이드 아웃은 여러보기가 어떻게 든 숨김 상태가되는 이벤트를 처리하기위한 것이 었습니다. (다른 이유로 인해 많이 발생했습니다. 마우스 오버와 마우스 아웃 대신 mouseenter와 mouseleave를 사용하십시오) 나는 즉시 죽이려고하는 것이 더 좋을 것이라고 결정했습니다. 이전 통화에서 사라지는 과정에있는 것이 있다면 내 정기 페이딩을 수행하십시오.

$(container).children('.content_view').filter(function(){return ($(this).css('opacity') < 1)}).each(function() { 
    $(this).stop(); 
    $(this).css('opacity',0); 
    $(this).css('hidden','none'); 
}); 

if ($(container).children('.content_view').filter(function(){return ($(this).css('display') != 'none');}).length > 0) 
    $(container).children('.content_view').filter(function(){return ($this.css('display') != 'none';}).fadeOut(transition, function() { 
    $(content).fadeIn(transition); 
}); 
else 
    $(content).fadeIn(transition); 

희망이 있습니다. 전에 필터 기능에 대해 몰랐습니다. 아주 편리 :) :)

내 경우에는 이것이 모든 콘텐츠가 스왑되며, 각 요소의 끝에서 완전히 볼 수있는 하나의 요소 트리를 남길 수있는 유일한 방법이기 때문에이 방법이 효과가 있음을 유의하십시오. 요구. 그것이 다음에 의해 드러내는 것을 끝내지 않았다면, 즉시 죽임을 당하고 교체됩니다.

Answer 1

이 작동합니다 :

$(container).children('.content_view').fadeOut(transition, function() { 
    $(next).fadeIn(transition); 
}); 

다음 시도 :

$(container).children('.content_view').each(function(){ 
    $(this).fadeOut(transition, function() { 
     $(next).fadeIn(transition); 
    }); 
}); 

그러나 아마 가장 좋은 솔루션은 CSS 전환을 사용하는 것입니다. 그럴 가능성이 있니? 이것이 어떤 브라우저에서 작동해야합니까?