Jquery 动画隐藏和显示

Question

当我点击一个链接时，我希望同时发生两件事。我正在慢慢浏览 Jquery 文档，但还没有了解我需要什么。

这是我的site的链接

当我点击服务链接时，我希望 #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');
    }
  );
});

home和services是两个链接，我希望services点击后隐藏#slideshowdiv，并显示slideshow2div，这将被隐藏然后替换第一个。

有相当多的 html，因此从链接中查看我的源代码可能会更容易。

Answer 1

已更新：此解决方案已根据 cmets 中的后续问题进行了更新。

您应该使用 callback method 的显示/隐藏方法。

$("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 方法完成，它就会运行。因此，您可以关闭/打开您的盒子，然后在回调方法中立即运行一个事件。