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

Posted 2023-05-08

【中文标题】JQuery UI 显示/幻灯片无法正常工作

【英文标题】：JQuery UI show/slide not working correctly

【发布时间】：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 事件中加载了代码，我将其移到了头部。

【参考方案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 元素有问题。