Kai,
>How can I make my #wait container show only if there is a delay in the
>response. Let's say that I
>only want to show it if there is no response within 2 seconds.
>
>This is my current code, which often cause the wait box to show and then
>hide, quickly - which looks
>odd to the user:
>
>$(document).ready(function(){
> // show wait-box
> $('#wait').css({opacity: 0}).animate({ opacity: 1 }, 3000);
> // load content
> $('#content').load('content.php', function() { $('#wait').hide(); });
>});
>
>Kia
$(document).ready(function(){
// cache "wait" result
var $wait = $("#wait");
var iWaitTimeout = setTimeout(
function(){
// show wait-box
$wait.css({opacity: 0}).animate({ opacity: 1 }, 3000);
},
// wait 2 seconds
2000
);
// load content
$('#content').load('content.php', function() {
// prevent the "wait" from showing
clearTimeout(iWaitTimeout);
// make sure wait is hidden
$wait.hide();
});
});
You could expand on this to only do the hide if the #wait layer is visible
(although the overhead to hide a layer is pretty minimal.)
-Dan
