问题
I've found a few similar topics here searching but I've not been able to adapt them to my exact situation. I have a simple single page website (well, I want it to be a single page) with five hyperlinks near the top. I have five different tables to display for each link and rather than create a new page for each table and use regular links to them I thought it'd be nice to fade one table out and fade the others in on the same page, depending on which link is clicked obviously.
So the default page would have the nav at the top:
<a href="#" id="table1">Table 1</a>
<a href="#" id="table2">Table 2</a>
<a href="#" id="table3">Table 3</a>
<a href="#" id="table4">Table 4</a>
<a href="#" id="table5">Table 5</a>
Then by default table1 would show on the page:
<table id="table1">
<tr>
<td>foo</td>
</tr>
<tr>
<td>bar</td>
</tr>
<table>
And the other four tables would be hidden. Then if the link to table 2 is clicked table 1 fades out and table 2 fades in, same for the other four tables/links
So the question is, what jQuery do I need for this? I know I need to use fadein/out and replaceWith but I've not been successful trying to modify some other examples I've found on here. Some specific examples with multiple tables would be appreciated.
回答1:
Don't reinvent the wheel, use something like jQuery UI. Check out the example for Effect here: http://jqueryui.com/effect/. Notice that there are several different effects that it can do for you. After finding the effect that you like you can click on the 'view source' link to grab the code.
回答2:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var current, tbl = $(".tbl").hide(), speed = 1000, sliding = false;
$(".hnd").click(function(e){
e.preventDefault();
if(sliding == true) return;
sliding = true;
var tblId = $(this).attr("href");
if(!current){
$(tblId).slideDown(speed, function(){
current = tblId;
sliding = false;
});
} else {
$(current).slideUp(speed, function(){
$(tblId).slideDown(speed, function(){
current = tblId;
sliding = false;
});
});
}
});
});
</script>
<style type="text/css">
.tbl{
border: 1px solid;
}
</style>
</head>
<body>
<a class="hnd" href="#table1">Table 1</a>
<a class="hnd" href="#table2">Table 2</a>
<a class="hnd" href="#table3">Table 3</a>
<a class="hnd" href="#table4">Table 4</a>
<a class="hnd" href="#table5">Table 5</a>
<div id="table1" class="tbl">
<table>
<tr>
<td>foo</td>
</tr>
<tr>
<td>bar</td>
</tr>
</table>
</div>
<div id="table2" class="tbl">
<table>
<tr>
<td>foo 2</td>
</tr>
<tr>
<td>bar 2</td>
</tr>
</table>
</div>
<div id="table3" class="tbl">
<table>
<tr>
<td>foo 3</td>
</tr>
<tr>
<td>bar 3 </td>
</tr>
</table>
</div>
<div id="table4" class="tbl">
<table>
<tr>
<td>foo 4</td>
</tr>
<tr>
<td>bar 4</td>
</tr>
</table>
</div>
<div id="table5" class="tbl">
<table>
<tr>
<td>foo 5</td>
</tr>
<tr>
<td>bar 5</td>
</tr>
</table>
</div>
</body>
</html>
回答3:
First of all, it is not good practise to user the same identifier on different HTML elements:
<a href="#" id="table1">Table 1</a>`
<table id="table1">`
you have to set up a click event on navigation or specify handlers explicitly as attributes:
<a href="#" id="tableLink1" onclick="ShowTable(1)">Table 1</a>
and then define the handler:
function ShowTable(number)
{
//fade out table that is shown
$('table:visible').fadeOut('slow',function (){
$('#table'+number).fadeIn('slow');
});
}
EDITED: make browser to wait until visible table is faded out before starting fading in the other table
回答4:
Just change slideDown to fadeIn and slideUp to fadeOut.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var current, tbl = $(".tbl").hide(), speed = 1000, sliding = false;
$(".hnd").click(function(e){
e.preventDefault();
if(sliding == true) return;
sliding = true;
var tblId = $(this).attr("href");
if(!current){
$(tblId).fadeIn(speed, function(){
current = tblId;
sliding = false;
});
} else {
$(current).fadeOut(speed, function(){
$(tblId).fadeIn(speed, function(){
current = tblId;
sliding = false;
});
});
}
});
});
</script>
<style type="text/css">
.tbl{
border: 1px solid;
}
</style>
</head>
<body>
<a class="hnd" href="#table1">Table 1</a>
<a class="hnd" href="#table2">Table 2</a>
<a class="hnd" href="#table3">Table 3</a>
<a class="hnd" href="#table4">Table 4</a>
<a class="hnd" href="#table5">Table 5</a>
<div id="table1" class="tbl">
<table>
<tr>
<td>foo</td>
</tr>
<tr>
<td>bar</td>
</tr>
</table>
</div>
<div id="table2" class="tbl">
<table>
<tr>
<td>foo 2</td>
</tr>
<tr>
<td>bar 2</td>
</tr>
</table>
</div>
<div id="table3" class="tbl">
<table>
<tr>
<td>foo 3</td>
</tr>
<tr>
<td>bar 3 </td>
</tr>
</table>
</div>
<div id="table4" class="tbl">
<table>
<tr>
<td>foo 4</td>
</tr>
<tr>
<td>bar 4</td>
</tr>
</table>
</div>
<div id="table5" class="tbl">
<table>
<tr>
<td>foo 5</td>
</tr>
<tr>
<td>bar 5</td>
</tr>
</table>
</div>
</body>
</html>
来源：https://stackoverflow.com/questions/14197326/fade-out-one-table-and-replace-with-another-using-jquery