fadeOut() 一张表,fadeIn() 另一张表
可能是一个非常基本的问题 -
我有 2 个表 #favorites 和 #leaders,每个表的底行都有一个按钮。
当我单击按钮时,我只想显示其中一个表。
所以我正在尝试以下方法,它有点有效:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('#favorites').hide();
$('#show_favorites').click(function() {
$('#leaders').fadeOut();
$('#favorites').fadeIn();
});
$('#show_leaders').click(function() {
$('#favorites').fadeOut();
$('#leaders').fadeIn();
});
});
</script>
但它同时发生,这看起来很尴尬。
在开始 fadeIn() 之前,如何等待 fadeOut() 完成?
更新:
我已将代码更改为
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('#favorites').hide();
$('#show_favorites').click(function() {
$('#leaders').fadeOut("slow", function() {
$('#favorites').fadeIn();
});
});
$('#show_leaders').click(function() {
$('#favorites').fadeOut("slow", function() {
$('#leaders').fadeIn();
});
});
});
</script>
现在它工作得更好,但是有一个新问题,当单击按钮时:
当一个表格(下面的屏幕截图中的灰色)消失时,滚动条跳起来。然后出现另一个表格,但它不再可见 - 您必须手动向下滚动。
有什么想法可以解决这个问题吗?
Probably a very basic question -
I have 2 tables #favorites and #leaders, each with a button in the bottom row.
And I want to display only one of tables, when I click a button.
So I'm trying the following and it kind of works:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('#favorites').hide();
$('#show_favorites').click(function() {
$('#leaders').fadeOut();
$('#favorites').fadeIn();
});
$('#show_leaders').click(function() {
$('#favorites').fadeOut();
$('#leaders').fadeIn();
});
});
</script>
but it happens at the same time, which looks awkward.
How do you wait for the fadeOut() to finish, before starting fadeIn()?
UPDATE:
I've change the code to
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('#favorites').hide();
$('#show_favorites').click(function() {
$('#leaders').fadeOut("slow", function() {
$('#favorites').fadeIn();
});
});
$('#show_leaders').click(function() {
$('#favorites').fadeOut("slow", function() {
$('#leaders').fadeIn();
});
});
});
</script>
And now it works better, but there is a new problem, when a button is clicked:
when the one table (grey in the screenshot below) disappears, the scrollbar jumps up. And then another table appears, but it is not visible anymore - you have to scroll down manually.
Any ideas please how to fight this?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
您可以向
fadeOut
提供回调函数,并在回调中调用fadeIn
。当fadeOut
完成时执行回调函数:请参阅jQuery API了解更多信息。
更新(基于更新的问题)
滚动问题的潜在解决方案:
这将导致文档自动滚动到刚刚淡入的元素的顶部。
You can supply a callback function to
fadeOut
, and callfadeIn
in the callback. The callback function is executed when thefadeOut
is complete:See the jQuery API for more info.
Update (based on updated question)
A potential solution to your scrolling problem:
This will cause the document to scroll automatically to the top of the element that's just faded in.
您必须像这样进行回调:
其他:
You must make a callback like this:
Other:
fadeOut 接受一个回调,当淡出完成时调用该回调。
fadeOut takes a callback which is called when fadeout is done.