Jquery 动画隐藏和显示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1025074/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery animate hide and show
提问by Cool Guy Yo
I would like to have two things happen at once when I click on a link. I am slowly going through Jquery documentation, but have yet to learn what I need yet.
当我单击链接时，我希望同时发生两件事。我正在慢慢浏览 Jquery 文档，但还没有了解我需要的东西。
Here is a link to my site
这是我网站的链接
When I click on the services link I would Like the #slideshowdivto hide, and a new div to replace it.
当我点击服务链接时，我希望#slideshowdiv隐藏它，并用一个新的 div 来替换它。
I had tried to just have the slideshow animate out on clicking the services link, but it would either do the animate function or go to the linked html page, not both. How would I accomplish both.
我曾尝试在单击服务链接时播放幻灯片动画，但它要么执行动画功能，要么转到链接的 html 页面，而不是两者兼而有之。我将如何实现两者。
It doesn't matter if I just hide and show divs on the same page, or if I go to a new html page. I just want to have the animate function and change the content while hiding one.
如果我只是在同一页面上隐藏和显示 div，或者我是否转到一个新的 html 页面都没有关系。我只想拥有动画功能并在隐藏内容的同时更改内容。
this is the jquery code I am using
这是我正在使用的 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 and services are the two links, and I would like services when clicked to hide the #slideshowdiv, and show the slideshow2div, which would be hidden and then replace the first one.
home 和 services 是两个链接，我想在点击服务时隐藏#slideshowdiv，并显示slideshow2div，这将被隐藏，然后替换第一个。
there is a fair amount of html so it may be easier to view my source from the link.
有相当数量的 html，因此从链接查看我的源可能会更容易。
采纳答案by Sampson
Updated: This solution was updated following a follow-up question in the comments.
更新：此解决方案已根据评论中的后续问题进行了更新。
You should use the callback methodof the show/hide methods.
您应该使用show/hide 方法的回调方法。
$("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. */
});
The callback method is the second parameter of the .show/.hide functions. It is ran whenever the .show/.hide method is completed. Therefore, you can close/open your box, and within the callback method run an event immediately afterwards.
回调方法是 .show/.hide 函数的第二个参数。只要 .show/.hide 方法完成，它就会运行。因此，您可以关闭/打开您的盒子，然后在回调方法中立即运行一个事件。
