Dan G. Switzer, II wrote:
> 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.
> $(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.)
>
Thanks! That was exactly what I wanted.
But I still have a problem. I also want to animate the height. And to prevent
the #wait box to show,
I add the default opacity and height to the CSS. But the height don't toggle...
Instead of:
$wait.css({opacity: 0}).animate({ opacity: 1 }, 3000);
I do this:
CSS:
#wait { opacity: 0; height: 0px }
JavaScript to show #wait
$wait.animate({ opacity: 1, height: 'toggle' }, 3000);
But the height doesn't toggle!
Kia
