fadeOut() one table, fadeIn() another
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() {
$('#favo开发者_StackOverflowrites').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?
You can supply a callback function to fadeOut
, and call fadeIn
in the callback. The callback function is executed when the fadeOut
is complete:
$('#leaders').fadeOut(function() {
$('#favorites').fadeIn();
});
See the jQuery API for more info.
Update (based on updated question)
A potential solution to your scrolling problem:
$('#leaders').fadeOut(function() {
$('#favorites').fadeIn(function() {
window.scrollTo(0, $(this).offset().top);
});
});
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:
$('#leaders').fadeOut(function()
{
$('#favourites').fadeIn(); // execute after fadeOut has finished
});
Other:
$('#favourites').fadeOut(function()
{
$('#leaders').fadeIn(); // execute after fadeOut has finished
});
$('#leaders').fadeOut("slow", function() { $('#favorites').fadeIn(); });
fadeOut takes a callback which is called when fadeout is done.
精彩评论