JQuery UI 显示/幻灯片无法正常工作

Question

所有编辑的编辑：经过几个月的努力，问题似乎是当当前元素内的部分/所有元素浮动/绝对定位时。这似乎会干扰滑动。

如果您遇到同样的问题，祝您好运，解决您的问题。

原帖：

真的很简单。我有几个带有多个元素的 div，并且一次仅显示其中一个 div（其余的都隐藏）。

当用户点击“Next”时，当前div应该向左滑动隐藏，下一个div应该从右侧滑入显示（实际逻辑不是问题）。

当我尝试使用 .slideUp() 和 .slideDown() 执行此操作时，效果非常好。然而，当尝试时：

$(oldBox).hide("slide", { direction: "right" }, 1000);

它不起作用。我已经链接了 JQuery UI，所以这不是问题。

任何帮助将非常感激。

编辑：链接到 JSFiddle：http://jsfiddle.net/NFyRW/

EDIT2：它用 JSFiddle 表示；但是，我无法让它在我的实际网站上运行。JS 位于单独的文件中，并加载到每个页面的页眉中（每个页面的页眉相同）。

Answer 1

如果您的幻灯片是绝对定位的，请使用 left 属性为它们设置动画。如果它们是相对的，则将左侧切换为左侧边距。

考虑到您的 HTML 看起来与此类似：

<div id="mainContainer">
   <div class="slide"></div>
   <div class="slide"></div>
</div>

#mainContainer {}
.slide {position:absolute;top:0;left:0;}

像这样的事情应该

• 淡出当前幻灯片
• 将当前幻灯片向左推出
• 淡入新幻灯片
• 从右侧拉入新幻灯片

。

var $oldBox=$('#oldBox');
    $oldBox.animate({
       'left':-$oldBox.outerWidth(true),
       'opacity':0
    },{duration:500,queue:false,
    specialEasing:{'left':'linear','opacity':'linear'}});

    $newBox.animate({
        'left':0,
        'opacity':1
    },{duration:500,queue:false,
    specialEasing:{'left':'linear','opacity':'linear'}});