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

所有编辑的编辑：经过几个月的处理,问题似乎是当前元素中的一些/所有元素浮动/绝对定位.这似乎干扰了滑动.

如果您遇到同样的问题,我希望您有幸解决您的问题.

原帖：

真的很简单.我有几个带有几个元素的div,并且一次只显示其中一个div(其余的都是隐藏的).

当用户单击“下一步”时,当前div应该通过向左滑动隐藏,下一个div应该通过从右侧滑入来显示(实际逻辑不是问题).

当我尝试使用.slideUp()和.slideDown()时,它工作得很漂亮.但是,在尝试时：

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

它不起作用.我已经将JQuery UI链接到了,所以这不是问题.

任何帮助将非常感激.

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

EDIT2：JSfiddle中的单词;但是,我一直无法让它在我的实际网站上工作. JS位于一个单独的文件中,并加载到每个页面的标题中(每个页面都有相同的标题).

解决方法

如果您的幻灯片绝对定位,请使用left属性为它们设置动画.如果它们是相对的,那么将左侧切换为margin-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
    },'opacity':'linear'}});

原文地址：https://www.jb51.cc/jquery/179140.html