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

【问题标题】：JQuery UI show/slide not working correctlyJQuery UI 显示/幻灯片无法正常工作
【发布时间】：2013-05-04 15:19:38
【问题描述】：

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

如果您有同样的问题，我希望您能顺利解决您的问题。

原帖：

真的很简单。我有几个包含多个元素的 div，一次只显示其中一个 div（其余的被隐藏）。

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

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

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

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

任何帮助将不胜感激。

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

EDIT2：它在 JSFiddle 中使用；但是，我无法让它在我的实际站点上运行。 JS 在一个单独的文件中，并加载在每个页面的标题中（每个页面的标题相同）。

【问题讨论】：

你能为此创建一个 jsFiddle 吗？
至少需要标记。
似乎工作正常jsfiddle.net/j08691/NFyRW/1
太棒了，但是你改变了什么，因为我的原始代码不起作用。
您在窗口 onload 事件中加载了代码，我将其移到了头部。

标签： jquery html css jquery-ui

【解决方案1】：

如果您的幻灯片是绝对定位的，请使用 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
    },{duration:500,queue:false,
    specialEasing:{'left':'linear','opacity':'linear'}});

【讨论】：

【解决方案2】：

包括 jquery 以及 jquery ui js 和 css 文件

不需要自定义 js 文件。那么可以使用下面的代码：

$(this).effect("slide", "right");要么 $(this).effect('slide', { direction: 'down'}, 500);

【讨论】：

【解决方案3】：

Twyckenham 将军，我遇到了和你一样的问题。

我通过调用 custom-min.js 文件解决了这个问题。试试这个。

<script src="js/jquery-1.9.1.js"></script>
<script src="js/jquery-ui-1.10.3.custom.js"></script>

$(document).ready(function() {
  $("#hide").click(function(){
     $(".target").hide( "slide", 
     { direction: "left"  }, 2000 );
  });
  $("#show").click(function(){
     $(".target").show( "slide", 
     {direction: "right" }, 2000 );
  });

});

这对我有用。我想知道为什么没有人提到这个自定义文件的用法。

问候

【讨论】：

这毫无意义。您通过调用 custom-min.js 解决了问题？
这个解决方案不完整，HTML部分在哪里，你是怎么安排的？ OP 对绝对定位的 html 元素有问题。