jQuery html 过渡

Question

我还在学习 jQuery，我现在想做的就是结合 html()带有过渡的方法(例如 hide() 和 show() )，以便更改具有过渡效果的 div 的 html。这是我尝试过的:

$('div.content_box').hide(1000).html(return_html).show(1000);

哪里div.content_box是 div，其内容/HTML 应通过转换进行更改，return_html 包含通过 ajax() 请求的 PHP 文件返回的 html。方法。

但是，这并没有给我想要的结果。它不是先隐藏 div，然后更改其 html，然后再次显示它，而是在隐藏 div 时就已经更改了 div 的 HTML 内容。

有谁知道我如何才能使其正常工作(其中操作以正确的顺序执行，一次一个)？

Answer 1

有很多方法可以归档您想要的内容:

在 hide 上使用回调: http://jsfiddle.net/VbkNE/

$('div.content_box').hide(1000, function() {
    $(this).html(return_html).show(1000);
});

使用queue : http://jsfiddle.net/VbkNE/1/

$('div.content_box').hide(1000).queue(function(next) {
    $(this).html(return_html);
    next();
}).show(1000);

使用 native setTimeout : http://jsfiddle.net/VbkNE/2/

$('div.content_box').hide(1000);
setTimeout(function() {
    $('div.content_box').html(return_html).show(1000)
}, 1000);

使用delay不适用于您的情况，引用 jQuery API - 延迟:

Only subsequent events in a queue are delayed; for example this will not delay the no-arguments forms of .show() or .hide() which do not use the effects queue.

在这种情况下，我会选择回调方法 - 因为您不需要像 setTimeout 中那样重新定义选择器，也不需要像 next() 中那样移动队列库存在队列示例中，但请注意队列方法的强大功能。例如用于链接 AJAX 调用。