Fade Out One Table And Replace With Another Using Jquery?
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)
Solution 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.
Solution 2:
<!DOCTYPE html><html><head><title></title><scripttype="text/javascript"src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script><scripttype="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><styletype="text/css">.tbl{
border: 1px solid;
}
</style></head><body><aclass="hnd"href="#table1">Table 1</a><aclass="hnd"href="#table2">Table 2</a><aclass="hnd"href="#table3">Table 3</a><aclass="hnd"href="#table4">Table 4</a><aclass="hnd"href="#table5">Table 5</a><divid="table1"class="tbl"><table><tr><td>foo</td></tr><tr><td>bar</td></tr></table></div><divid="table2"class="tbl"><table><tr><td>foo 2</td></tr><tr><td>bar 2</td></tr></table></div><divid="table3"class="tbl"><table><tr><td>foo 3</td></tr><tr><td>bar 3 </td></tr></table></div><divid="table4"class="tbl"><table><tr><td>foo 4</td></tr><tr><td>bar 4</td></tr></table></div><divid="table5"class="tbl"><table><tr><td>foo 5</td></tr><tr><td>bar 5</td></tr></table></div></body></html>Solution 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:
functionShowTable(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
Solution 4:
Just change slideDown to fadeIn and slideUp to fadeOut.
<!DOCTYPE html><html><head><title></title><scripttype="text/javascript"src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script><scripttype="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><styletype="text/css">.tbl{
border: 1px solid;
}
</style></head><body><aclass="hnd"href="#table1">Table 1</a><aclass="hnd"href="#table2">Table 2</a><aclass="hnd"href="#table3">Table 3</a><aclass="hnd"href="#table4">Table 4</a><aclass="hnd"href="#table5">Table 5</a><divid="table1"class="tbl"><table><tr><td>foo</td></tr><tr><td>bar</td></tr></table></div><divid="table2"class="tbl"><table><tr><td>foo 2</td></tr><tr><td>bar 2</td></tr></table></div><divid="table3"class="tbl"><table><tr><td>foo 3</td></tr><tr><td>bar 3 </td></tr></table></div><divid="table4"class="tbl"><table><tr><td>foo 4</td></tr><tr><td>bar 4</td></tr></table></div><divid="table5"class="tbl"><table><tr><td>foo 5</td></tr><tr><td>bar 5</td></tr></table></div></body></html>
Post a Comment for "Fade Out One Table And Replace With Another Using Jquery?"