Question

I’m trying to make a status bar in my web app grow when it receives a message (via php) and then revert back to it’s original height after a few seconds.

Here’s the css that is applied when the page is loaded:

<style>

      #status {

        height:17px;
        background-color:#424242;
        -moz-transition:height 1s;
        -webkit-transition:height 1s;

        }

    #status:hover {

        height:60px;

     }

</style>

and here is the code that is called when the user receives a message.

<script>

    $('#status').css('height', '60px');
    $('#status_message').text('$message').show();
    $('#status').delay(1000).css('height', '17px');

 </script>

However, I’m having two problems. One, everything works when I take out the last statement in the script, so I think the delay() call is messing something up. I’ve tried moving it to the end of the second statement like this:

<script>

    $('#status').css('height', '60px');
    $('#status_message').text('$message').show().delay(100000);
    $('#status').css('height', '17px');

 </script>

But that also doesn’t work. The second problem I’m having is one the above code runs, then the original css hover event for my status bar doesn’t work. I’ve tried re-specifyng all of the original css for the status bar with the $.css() function, but it still doesn’t work. I think it has something to do with me not being able to re-apply the #status:hover event with jQuery, and when I try to implement the same behavior with .hover() , it still doesn’t work.

Any ideas?

Answer 1

Why not simply use a setTimeout?

setTimeout(function()
{
     $('#status').css('height': '17px');
}, 1000);