如何让jQuery特效在火狐和谷歌浏览器上工作？

Question

我正在研究jQuery和fadeIn & fadeOut效果。我有以下代码来显示和隐藏带有消息的div。

`

<script type="text/javascript">
    $(document).ready(function() {

        $("button").click(function() {
            $("#upd").fadeIn(3000);
            $("#upd").fadeOut(20000);
        });

    });
</script>

<style type="text/css">
    div
    {
        background: rgb(237, 243, 254);
        margin: 0px 0px 5px 0px;
        padding: 13px 30px 13px 30px;
        width: 300px;
    }
</style>

`

它在I浏览器上工作得很好，但是在chrome中它不能做任何事情，而且我在firefox中得到了显示和隐藏行为。

有没有一个特殊的步骤让这个库在所有浏览器中均匀地或至少接近地工作？

Answer 1

从fadeIn的回调中尝试fadeOut。这将确保后一个效果在第一个效果完成后运行，而不是在以下过程中运行：

$(document).ready(function(){
  $("button").click(function(){
    $("#upd").fadeIn(3000,function(){
      $(this).fadeOut(2500);
    });
  });
});

jQuery本身在所有浏览器中的工作方式应该几乎相同。如果你有奇怪的行为，你可能做错了什么--而不是jQuery :)

Answer 2

第一，确保你使用的是最新的jQuery，并且你所有的浏览器都启用了Javascript。

其次，尝试将fadeIn和fadeOut调用链接在一起：

$("button").click(function() {
    $("#upd")
        .fadeIn(3000)
        .fadeOut(20000);
});

Answer 3

问题是：$("button")

没有像按钮这样的元素，如果它是一个类：$('.button')

..。如果是id，则：$('#button')