5

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

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

原帖：

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

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

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

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

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

任何帮助将非常感激。

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

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

4

3 回答 3

2

如果您的幻灯片是绝对定位的，请使用 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'}});
于 2013-05-10T01:43:10.697 回答
0

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

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

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

于 2014-11-14T07:19:43.857 回答
-2

特威克纳姆将军，我遇到了和你一样的问题。

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

});

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

问候

于 2013-11-07T06:10:16.577 回答