jQuery UI 幻灯片效果问题

发布于 2024-08-12 08:01:54 字数 779 浏览 3 评论 0原文

我正在重新设计我的公司网站，我们将使用 jQuery、Flash 等进行相当多的效果。到目前为止，我在执行这些操作时没有遇到太大问题，但两个小问题不断出现，我已经在这里询问人们后，除了成功之外什么也没有，所以这里是：

有问题的开发页面：（URL 已删除）

第一期

单击顶部导航中“结果”下的绿色箭头。这应该是从右向左滑出菜单。它的行为与 Firefox 中的行为相同，但 IE 和 Safari 在页面中间开始向左滑动动画，然后将菜单移回其所属位置。我不知道为什么要这样做，因为菜单本身绝对位于 CSS 中。另一个问题是，一旦菜单打开并且您尝试关闭它（使用类似颜色的箭头），它会按照 Firefox 中的方式进行转换，但在转换完成后又会重新出现。在 IE 和 Safari 中，菜单永久消失，但动画再次在页面中间开始。

第二（有点）问题

如果这个幻灯片问题可以解决，我想对底部“桶”应用类似的效果，当您单击它们下面的灰色箭头框时，它会上下滑动。目前，我正在修改 jQuery 中的 .animate 函数，首先增加高度，然后应用负边距，如下所示：

$('#footer-bucket1')
    .animate({ height: '392px' }, 300)
    .animate({ marginTop: '-306px'}, 300)
    .addClass('bucket-open');

当我对其应用向上滑动过渡时，我可以看到该框变大了，但是在向下的方向，离开页面（应用了“overflow：hidden”）。有没有办法指定该框实际上向上滑动以显示内容，就像现在一样？提前致谢！

原文

I'm redesigning my company website and we're going pretty effects-heavy with jQuery, Flash, etc. So far I haven't had much of a problem doing any of this, but two minor issues keep cropping up and I've had nothing but success after asking people here, so here goes:

Development page in question: (URL removed)

First Issue

Click on the green arrow in the top nav under "Results". This is supposed to slide out a menu from right to left. It behaves as it should in Firefox, but IE and Safari start the slide left animation way over in the middle of the page and then shift the menu back where it belongs. I have no idea why it's doing this since the menu itself is absolutely positioned in the CSS. Another issue is once the menu is open and you attempt to close it (using the similarly colored arrow), it transitions as it should in Firefox, but then reappears once the transition is complete. In IE and Safari, the menu disappears permanently, but the animation again starts in the middle of the page.

Second (sorta) Issue

If this slide thing can be worked out, I'd like to apply a similar effect to the bottom "buckets", which slide up and down as you click on the gray arrow box beneath them. Currently, I'm hacking at the .animate function in jQuery to first increase the height, then apply a negative margin, like so:

$('#footer-bucket1')
    .animate({ height: '392px' }, 300)
    .animate({ marginTop: '-306px'}, 300)
    .addClass('bucket-open');

When I applied a slide up transition to it, I could see that the box was getting bigger, but in a downward direction, off the page (which has overflow: hidden applied to it). Is there a way to specify that the box literally slide up to reveal the content, much like it does now? Thanks in advance!

分享到QQ

分享到微博