크로스 페이드 애니메이션

Question

top_content 함수가 #test 및 # test1로 교차 페이드하고 싶습니다. 지금 divs #test와 # test1은 간단한 토글을 사용하고 있습니다. 그러나 나는 그 둘을 동시에 페이드 아웃하고 싶습니다.

$(document).ready(function() { 
    $('#test, #test1').hide(); 
    $('.home').click(function() { 
     var id = $(this).html().toLowerCase(); 
     var $top_content = $('#' + id + ':not(:visible)'); 
     if ($('.current').length === 0) { 
      toggleContent($top_content); 
     } else { 
      $('.current').toggle(400, function() { 
       toggleContent($top_content); 
      }); 
     } 
    }); 

    function toggleContent(top_content) { 
     top_content.toggle(400); 
     $('.current').removeClass('current'); 
     top_content.addClass('current'); 
    } 
    $("a.home").click(function() { 
     $('.active').not(this).removeClass('active'); 
     $(this).toggleClass('active'); 
    }); 
}); 

http://jsfiddle.net/FJ8DV/

Answer 1

당신은 "크로스 페이드 '효과를 얻지 못하고있는 이유는이 코드입니다 : 당신은 콜백에서 toggleContent() 함수에 호출을 배치 한

 $('.current').toggle(400, function() { 
      toggleContent($top_content); 
     }); 

그 완료시 이라고하고 .toggle()의 - 이전 페이드 아웃이 끝날 때까지 페이드 인이 발생하지 않습니다. 콜백에서 그 이동이 완료 따라서 애니메이션이 동시에 일어날 수 있도록 기다릴 것 또한

 $('.current').toggle(400); 
     toggleContent($top_content); 

, 나는 "크로스 페이드는"요소가 동일한에서 같은 장소 에 나타납니다 의미 가정 시간, 그래서 당신이 그들에게 position:absolute 스타일을 부여해야합니다 :이 업데이트에서와 같이 크로스 페이드에 대해 얘기하고 있음을 감안할 때

#top_content div { position : absolute; } 

을, 당신은 fadeToggle()와 .toggle()을 대체하는 것 같아서 당신의 데모 (나는 페이드가 더 명백해질 수 있도록 더 긴 지연을 사용했습니다) : http://jsfiddle.net/FJ8DV/1/