Question

我有一个带有以下标记的HTML文档：

<div id="outside">
<div id="warning">Some warning here</div>
<div id="inside"></div>
</div>

我想要做的是按照列出的顺序列出的这些事项，而不是在事先完成之前进入下一个项目：

隐藏#outside元素。
将#inside的内容设置为“foo”。
显示#outside元素。

这样的事情可以用jQuery完成：

$('#outside').hide(function(){
    $('#inside').html('bar');
    $('#outside').show();
});

这个代码变得更加混乱，因为更多的事件包括回调，并且变得不易维护。

相反，我想做这样的事情：

$.sequence(
    function(){ $('#outside').hide(); },
    function(){ $('#inside').html('foo'); },
    function(){ $('#outside').show(); }
);

此代码清楚地显示了该过程的每个步骤，并允许轻松插入/删除任何步骤，因为它不需要嵌套函数回调。

请注意，此处显示的HTML从我实际使用的内容和我希望更长时间应用于这些元素的操作链中大大简化。

通常，只有在同一个jQuery元素上使用顺序方法调用才能实现这一点，但是使用的不同元素不允许队列按顺序执行。我正在寻找一种方法来对读取时看起来干净的调用进行排序，并使用任何元素。

Answer 1

在这个特定的例子中，它相对容易。您可以通过以下方式获得所需的结果：

$('#outside').hide();
$('#inside').html('foo');
$('#outside').show();

但是，如果你抛出异步事件，这显然是行不通的。让我们说你想用ajax得到'foo'。这将是一种相对常见的做法。

// request for content immediately
var req = $.get("myfile.php");
// fade out container
$("#outside").fadeOut(function(){

    // now that the container is faded out, we
    // bind to the done callback of the request
    // so that we can use the response and fadeIn the container
    // as soon as possible without causing an abrupt stop of the animation
    // if the request finishes early (it most likely will).
    req.done(function(response){
        $("#inside").html(response);
        $("#outside").fadeIn();
    });
});

除非您不习惯使用延迟对象，否则很难读取。它产生少量代码，可以通过微妙的动画尽快检索和显示内容。

如果你真的想让它“看起来更好”，你当然可以在函数后面抽象这个方法，但它最终可能不太可维护（我在哪里定义该函数？）< / p>

Answer 2

这个例子适合你吗？

function performTransition(){
    $('#outside').hide();
    $('#inside').html('foo');
    $('#outside').show();
}

$(function(){
    $(selector).click(performTransition);
});

Answer 3

您可以使用标准动画队列.queue。它仍然非常冗长，但至少没有嵌套。

$("#outside").queue(function() {
   $("#outside").hide('slow');
   $(this).dequeue();
});
$("#outside").queue(function() {
   $("#inside").html('bar');
   $(this).dequeue();
});
$("#outside").queue(function() {
   $("#outside").show();
   $(this).dequeue();
});

跨多个元素排队jQuery事件/操作

3 个答案: