Jquery动画隐藏和显示

当我点击链接时，我想一次发生两件事。 我正在慢慢浏览Jquery文档，但尚未了解我的需求。

这是我网站的链接

当我点击服务链接时，我希望隐藏#slideshow div，并使用新的div替换它。

我试图让幻灯片显示单击服务链接动画，但它可以执行动画function或转到链接的html页面，而不是两者。 我将如何实现这两个目标。

如果我只是在同一页面上隐藏和显示div，或者如果我转到一个新的html页面，则无关紧要。 我只想拥有动画function并在隐藏内容时更改内容。

这是我正在使用的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

更新：此解决方案在评论中的后续问题后更新。

您应该使用show / hide方法的回调方法。

 $("a").click(function(){ /* Hide First Div */ $("#div1").hide("slow", function(){ /* Replace First Div */ $(this).replaceWith("
New Div!
"); }); /* Hide Second Div */ $("#div2").hide("slow", function(){ /* Replace Second Div */ $(this).replaceWith("
New 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方法完成，就会运行它。 因此，您可以关闭/打开您的框，并在回调方法中立即运行事件。