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