Question

我正在尝试在我的网络应用中创建一个状态栏，当它收到一条消息（通过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（）实现相同的行为时，它仍然无效。

有什么想法吗？

Answer 1

为什么不简单地使用setTimeout？

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

Answer 2

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

要避免这种情况，请将新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();

jquery - 在.css（）调用之后恢复原始样式声明，以及其他奇怪之处

2 个答案: