淡出，加载新内​​容，淡入->滑动 [英] fadeout, load new content, fadein --> slide

问题描述

我当前正在淡出div的内容，将其替换为新内容，然后再次淡入，如下所示:

I am currently fading out the content of a div, replacing it with new content, and then fading it in again as follows:

area.fadeOut('400').load("file.php", 
    function(){
        $(this).fadeIn('400');
    }
);

首先，此链接是否正确?

First of all, is this chained correctly?

第二，如果可能的话，我想通过从右侧滑入来替换淡入(是否需要将旧内容滑到左侧)?如何实现?

Secondly, I would like to replace the fading-in by sliding-in from the right, if that was possible (would need to slide the old content to the left)? How could that be achieved?

推荐答案

我想指出fadeIn& fadeOut是jQuery Core的一部分.您是否已加载jQuery UI?如果没有，则需要其他答案中使用的show版本.

I'd like to point out that fadeIn & fadeOut are part of jQuery Core. Do you have jQuery UI loaded in? If not, you'll need it for the version of show used in other answers.

此外，您已经有了area变量，因此无需重新实例化S(this).这样做的次数越多，速度越慢.

Also, you already have the area variable, so there's no need to re-instance with S(this). It slows down the experience the more you do it.

尝试一下:

var newArea = area.clone().css("display", "none").insertAfter(area);
newArea.load("file.php", function() {
    area.hide("slide", {direction:"left"}, 400, function() {
        area.remove();
        area = newArea;
    });
    newArea.show("slide", {direction:"left"}, 400);

});

应该将其加载到隐藏的元素中，然后在原始元素向左滑动时从右侧滑动.

It should load into a hidden element then slide in from the right side as the original element slide to the left.

由于您似乎正在寻找一些不同的东西，所以我正在更新代码.

Since it seems you're looking for something a little different, I'm updating the code.

这篇关于淡出，加载新内​​容，淡入->滑动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！