2011-12-11 5 views
0

기본적으로 $.get() 함수를 사용하여 웹 사이트에서 데이터를 검색합니다. 데이터를 수신하면 기존 콘텐츠를 슬라이드 업하고 새 콘텐츠를 슬라이드 다운해야합니다.jQuery slideDown() 및 slideUp() 효과 문제

$.get(url, so, function (data) { 
    if (data.length>0) 
    { 
     $("#center_content_box").slideToggle(2000).empty().html(data).slideToggle(2000); 
    } 
}); 

문제는 새로운 내용이 다음 표시되면 효과가 발생한다는 것입니다 :

여기 내 코드입니다. 링크를 클릭하면 http://www.elegantthemes.com/preview/BusinessCard/과 비슷한 효과를 원합니다. 내용 슬라이드 업이 사라지고 슬라이드가 된 다음 다시 사라집니다. 애니메이션 샤이

$("#item").slideDown('slow', function(){ 
            $("#item").html("Set content here after effect is done"); 
          }); 

완료되면

답변

1

애니메이션 완료 핸들러를 사용하여 데이터를 div로 설정할 수 있습니다.

$.get(url, so, function (data) { 
      if (data.length>0) 
       { 
       $("#center_content_box").slideToggle(2000,function(){ 
        $("#center_content_box").empty().html(data).slideToggle(2000); 
       }); 
} 
}); 

방문하시기 바랍니다 Example

3

당신은 테스트 애니메이션을 완료 핸들러를 사용할 수 있습니다.

+0

이 일을 필자 슬라이드 효과는 링크와 같이 페이드 효과를 얻는 방법에 혼란 work.im 것으로 보인다. $ ("# center_content_box"). slideUp (2000, function() {$ ("# center_content_box") .html (data) .slideDown (2000)}); –

+1

답변 확인 : http://stackoverflow.com/questions/734554/jquery-fadeout-then-slideup –