JQuery UI显示/幻灯片无法正常工作 [英] JQuery UI show/slide not working correctly

问题描述

所有编辑的编辑：在几个月的工作后，这个问题似乎是当当前元素内的一些/所有元素浮动/绝对定位。这似乎干涉滑动。

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

原文：

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

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

当我使用.slideUp（）和.slideDown（）来做这件事时，它的效果非常好。然而，在尝试时：

  $（oldBox）.hide（slide，{direction：right}，1000） ; 
  

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

任何帮助都将非常感谢。

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

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

解决方案

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

考虑到您的HTML看起来与此类似：

 < div id =mainContainer> 
< div class =slide>< / div> 
< div class =slide>< / div> 
< / div> 
 
 #mainContainer {} 
 .slide {position：absolute; top：0; left：0;} 
  

类似这样的应用程序

• 淡出当前幻灯片
  
• 将新幻灯片向左推出


• 淡入新幻灯片中


• 从右侧拉入新幻灯片

。

  var $ oldBox = $（ '#o​​ldBox'）; 
 $ oldBox.animate（{$ b $'left'： -  $ oldBox.outerWidth（true），
'opacity'：0 
}，{duration：500，queue：false ，
 specialEasing：{'left'：'linear'，'opacity'：'linear'}}）; 
 
 $ newBox.animate（{$ b $'left'：0，
'opacity'：1 
}，{duration：500，queue：false，
 specialEasing：{'left'：'linear'，'opacity'：'linear'}}）; 
  

The EDIT of all edits: after literally months working on it, the issue seems to be when some/all of the elements inside the current element are floated/absolutely positioned. This seems to interfere with the sliding.

If you have this same problem, I wish you luck in resolving your issue.

Original Post:

Pretty simple really. I have several divs with several elements, and only one of these divs are shown at a time (the rest are hidden).

When the user clicks "Next", the current div should hide by sliding to the left, and the next div should be shown by sliding in from the right (the actual logic is not an issue).

When I tried doing this with .slideUp() and .slideDown() it worked beautifully. However, when trying:

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

it doesn't work. I have JQuery UI linked to already, so that's not the issue.

Any help would be much appreciated.

EDIT: Link to JSFiddle: http://jsfiddle.net/NFyRW/

EDIT2: It words in JSFiddle; however, I've been unable to get it to work on my actual site. The JS is in a separate file, and is loaded in the header of each page (same header for every single page).

解决方案

If your slides are positioned absolutely, animate them using the left property. If they're relative, then switch out the left for margin-left.

Considering your HTML looks similar to this:

<div id="mainContainer">
   <div class="slide"></div>
   <div class="slide"></div>
</div>

#mainContainer {}
.slide {position:absolute;top:0;left:0;}

Something like this should

• fade out the current slide
• push out the current slide to the left
• fade in the new slide
• pull in the new slide from the right

.

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

这篇关于JQuery UI显示/幻灯片无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！