Question

所有编辑的编辑：经过数月的研究，问题似乎是当前元素中的部分/全部元素浮动/绝对定位。这似乎会干扰滑动。

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

原帖：

非常简单。我有几个带有几个元素的div，并且一次只显示其中一个div（其余的都是隐藏的）。

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

当我尝试使用.slideUp（）和.slideDown（）时，它工作得很漂亮。但是，在尝试时：

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

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

非常感谢任何帮助。

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

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

Answer 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'}});

Answer 2

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

不需要自定义js文件。然后可以使用以下代码：

$（this）.effect（＆＃34; slide＆＃34;，＆＃34; right＆＃34;）;要么 $（this）.effect（＆＃39; slide＆＃39;，{direction：＆＃39; down＆＃39;}，500）;

Answer 3

特威克汉姆将军，我和你的问题一样。

我通过调用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 );
  });

}）;

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

此致

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

3 个答案: