jQuery 애니메이션 가죽과 쇼

Question

링크를 클릭하면 한 번에 두 가지 일이 발생하고 싶습니다. 나는 jQuery 문서를 천천히 겪고 있지만 아직 필요한 것을 아직 배우지 못했습니다.

여기 내 링크가 있습니다 대지

서비스 링크를 클릭하면 #slideshow div 숨기고 새로운 div를 교체합니다.

서비스 링크를 클릭 할 때 슬라이드 쇼를 애니메이션으로 만들려고했지만 애니메이션 기능을 수행하거나 링크 된 HTML 페이지로 이동하여 둘 다가 아닙니다. 둘 다 어떻게 달성 할 것인가?

같은 페이지에 DIV를 숨기고 표시하는 것은 중요하지 않거나 새 HTML 페이지로 이동하는 경우가 중요하지 않습니다. 나는 단지 애니메이션 기능을 가지고 있고 내용을 숨길 때 내용을 변경하고 싶습니다.

이것은 내가 사용하는 jQuery 코드입니다

$(document).ready(function(){   
  $("a.home").toggle(
    function(){
      $("#slideshow").animate({ height: 'hide', opacity: 'hide' }, 'slow');   
    },
    function(){
      $("#slideshow").animate({ height: 'show', opacity: 'show' }, 'slow');   
    }
  );
});

$(document).ready(function(){   
  $("a.services").toggle(
    function(){
      $("#slideshow2").animate({ height: 'show', opacity: 'show' }, 'slow');
    },
    function(){
      $("#slideshow2").animate({ height: 'hide', opacity: 'hide' }, 'slow');
    }
  );
});

가정과 서비스는 두 개의 링크이며, 클릭하면 #slideshow div, 쇼를 보여줍니다 slideshow2 div, 이는 숨겨져 첫 번째를 교체합니다.

상당한 양의 HTML이 있으므로 링크에서 내 소스를 더 쉽게 볼 수 있습니다.

Answer 1

업데이트 :이 솔루션은 의견에서 후속 질문에 따라 업데이트되었습니다.

당신은 사용해야합니다 콜백 메소드 쇼/숨기기 방법.

$("a").click(function(){

  /* Hide First Div */
  $("#div1").hide("slow", function(){
    /* Replace First Div */
    $(this).replaceWith("<div>New Div!</div>");
  });

  /* Hide Second Div */
  $("#div2").hide("slow", function(){
    /* Replace Second Div */
    $(this).replaceWith("<div>New Div!</div>");
  });

  /* If you wanted to sequence these events, and only
     hide/replace the second once the first has finished,
     you would take the second hide/replace code-block 
     and run it within the callback method of the first
     hide/replace codeblock. */

});

콜백 메소드는 .show/.hide 함수의 두 번째 매개 변수입니다. .show/.hide 메소드가 완료 될 때마다 실행됩니다. 따라서 상자를 닫거나 열 수 있으며 콜백 메소드 내에서 즉시 이벤트를 실행할 수 있습니다.