0

我试图让我的网络应用程序中的状态栏在收到消息（通过 php）时增长，然后在几秒钟后恢复到原来的高度。

这是加载页面时应用的 css：

<style>

      #status {

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

        }

    #status:hover {

        height:60px;

     }

</style>

这是用户收到消息时调用的代码。

<script>

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

 </script>

但是，我有两个问题。一，当我取出脚本中的最后一条语句时，一切正常，所以我认为 delay() 调用搞砸了。我尝试将它移到第二个语句的末尾，如下所示：

<script>

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

 </script>

但这也行不通。我遇到的第二个问题是上面的代码运行，然后我的状态栏的原始 css 悬停事件不起作用。我已经尝试使用 $.css() 函数重新指定状态栏的所有原始 css，但它仍然不起作用。我认为这与我无法使用 jQuery 重新应用 #status:hover 事件有关，当我尝试使用 .hover() 实现相同的行为时，它仍然不起作用。

有任何想法吗？

4

2 回答 2

1

为什么不简单地使用 a setTimeout？

setTimeout(function()
{
     $('#status').css('height': '17px');
}, 1000);
于 2012-04-17T18:44:30.400 回答
0

您的第一个问题是通过 jquery 使用 .css 实际上应用了内联样式。

为避免这种情况，请将新 css 放入新类中，例如：

#status.dynamic{
    height:60px;
}

和你的js：

    $('#status').addClass('dynamic');
    //$('#status_message').text('$message').show().delay(100000);
    $('#status').removeClass('dynamic');

至于延迟，你把它放在最后并没有延迟任何事情。如果你想看到它的工作，试试这样：

$('#status_message').text('$message').show().delay(1000).fadeOut();
于 2012-04-17T18:48:20.310 回答