淡出，加载新内容，淡入 --> 幻灯片答案

【问题标题】：fadeout, load new content, fadein --> slide淡出，加载新内容，淡入 --> 幻灯片
【发布时间】：2011-09-17 11:57:20
【问题描述】：

我目前正在淡出一个div的内容，用新的内容替换它，然后再次淡入如下：

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

首先，这个链接是否正确？

其次，如果可能的话，我想通过从右侧滑入来替换淡入（是否需要将旧内容滑到左侧）？怎么可能实现？

【问题讨论】：

标签： jquery load fade slide

【解决方案1】：

我想指出 fadeIn 和 fadeOut 是 jQuery Core 的一部分。你有 jQuery UI 加载吗？如果没有，您将需要它用于其他答案中使用的 show 版本。

此外，您已经有了 area 变量，因此无需使用 S(this) 重新实例化。你做的越多，体验就越慢。

试试这个：

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);

});

它应该加载到一个隐藏元素中，然后随着原始元素向左滑动而从右侧滑入。

编辑：由于您似乎正在寻找一些不同的东西，我正在更新代码。

【讨论】：

我的版本也需要 UI 吗？与其他人一样：代码导致 display: none ?
是的，如果没有 jQuery UI 库，做你想做的事并不难，但你想做什么取决于你。主要区别在于您会预设一些 css 并使用 'animate' 方法而不是 'show' 方法。
好吧，我只想让旧内容向左滑出，而新内容从右侧滑入。如果不是真的有必要，我宁愿不包括它。感谢您对 $(this) 的提示！
警告！如果不添加 jQuery UI 库，'show' 方法将失败。 HTML 将保持隐藏状态。
是的，这正是我所经历的！使用 UI，代码可以工作，但这并不是我真正想到的。滑出和滑入不能同时发生吗？（就像他们在非 ajax 滑块中那样）

【解决方案2】：

对我来说看起来不错，只需将对 fadeIn() 的调用替换为 $(this).show("slide", { direction: "left" }, 400);

【讨论】：

并删除我假设的初始淡出？好吧，它等了 400 秒，然后又轻视了它，即使滑动速度太快，看不到它？
如何修改实际滑动效果的长度？
@Ben，更改 400。对于这样的问题，您真的应该使用 google jquery slide 获取 api
改变 400 并不会改变实际滑动效果的长度。它所做的只是改变效果应用之前的持续时间！？我的主要问题是所有效果+负载的正确链接，这显然不是那么简单！？

【解决方案3】：

area.fadeOut('400', function() {
    $(this).load("file.php", function() {
            $(this).show("slide", {direction:"left"}, 400);
    });
});

我认为您需要像这样调用load，因为它可能不会等待fadeOut 完成。

【讨论】：

您的括号没有正确闭合。此代码不会使内容可见。
可见性还是没有？
什么是面积？它是您指定为选择器的变量吗？如果不是，您需要使用$('#area') 之类的东西。如果这不是问题，只需$(this).show(); 看看其余参数是否有问题。
对不起康纳，var area = $('someDiv');