如何让 jQuery 效果在 Firefox 和 Google Chrome 上运行？

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>

`

它在 Internet Explorer 上完美运行，但在 Chrome 中不起作用，并且我在 Firefox 中获得显示和隐藏行为。

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

Answer 1

尝试 消退 从回调 淡入. 。这将确保后一个效果在第一个效果完成后运行，而不是在以下期间运行：

$(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

下面的问题是： $（ “链接”）

有像按钮没有元素，如果它是一个类则： $（ '按钮'）

...并且如果它是一个id则： $（ '＃按钮'）