JQuery UI显示/幻灯片不能正常工作

所有编辑的编辑：在几个月的工作后，问题似乎是当当前元素内的一些/所有元素浮动/绝对定位。这似乎会干扰滑动。JQuery UI显示/幻灯片不能正常工作

如果您有同样的问题，祝您好运，以解决您的问题。

原帖：

真的很简单。我有几个div与几个元素，并且只有其中一个div显示在一个时间（其余都隐藏）。

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

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

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

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

任何帮助将不胜感激。

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

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

来源

2013-05-10 General_Twyckenham

你能为此创建一个jsFiddle吗？ – j08691 2013-05-10 01:30:04

当然，给我一下 – 2013-05-10 01:37:55

至少需要标记。 – 2013-05-10 01:45:25

如果您的幻灯片已绝对定位，请使用左侧属性对它们进行动画处理。如果它们是相对的，那么将左边的余量向左切换。

考虑到你的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-10 01:43:10 Aaron

试过这个，没有工作:( – 2013-05-10 01:49:49

-2

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

}）;

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

问候

来源

2013-11-07 06:10:16 sumanas

这没有任何意义，你通过调用custom-min.js解决了这个问题？ – idmean 2013-11-12 17:48:08

包括jQuery的，以及jQuery UI的JS和CSS文件

有没有需要定制js文件。然后可以使用下面的代码：

$（this）.effect（“slide”，“right”）;或 $（this）.effect（'slide'，{direction：'down'}，500）;

来源

2014-11-14 07:19:43

JQuery UI显示/幻灯片不能正常工作

回答

相关问题