Question

我是jQuery的新手，我正在尝试一个简单的程序。在这个程序中我想要实现的是，当我点击div文本然后第一行将淡出然后它将改变背景颜色然后它将淡入，所以整体它将产生缓慢改变颜色的效果，但这里发生了什么就是当我点击文本时，线条会突然改变颜色，然后它会逐渐消失，然后它会淡入。所以我想知道是否有办法在执行淡出后执行换色代码。

我的节目：

        $(document).ready(function(){
            $("#firstDiv").click(function(){
                //                    $(this).fadeOut(1000);

                $(this).fadeOut(1000);

                $(this).css("background-color", "aqua");

                $(this).fadeIn(1000);


            });
        });
    </script>
</head>
<body>
    <div id="firstDiv" style="background-color: yellowgreen">
        Click Me
    </div>
</body>

Answer 1

您必须将颜色更改为传递给fadeOut的回调：

$(this).fadeOut(1000, function() {
    $(this).css("background-color", "aqua");
}).fadeIn(1000);

您在回调中放入的所有内容都会在fadeOut完成后执行。 <{1}}不会立即执行，因为效果方法会自动queued。

但是：如果你在回调中做了一些计算成本高昂的事情（即需要时间），而你想在完成后调用fadeIn，你必须放{{在回调中也是如此：

fadeIn

否则将在回调结束前调用fadeIn。

在这方面也值得一读：Can somebody explain jQuery queue?

Answer 2

您可以像这样使用fadeOut（）的回调函数：

$(this).fadeOut(1000, function(){
    $(this).css("background-color", "aqua").fadeIn(1000);
});

Answer 3

jQuery排队API可能值得一看，它的目的是让您排队一系列将应用于所选项目的操作。

http://api.jquery.com/queue/

在jquery中完成前一行之后执行一行

3 个答案: