0

我目前正在制作一个小导航菜单。在其中一个下拉菜单中，我需要一个类别来扩展。有用。但是，当类别在 jQuery .hide('slow') 的帮助下收回时，我要隐藏的菜单在隐藏动画结束时闪烁一次，然后被正确隐藏。

下面是一些代码来说明我的问题：

$(document).ready(function(){

    var verif = false;

        $("a").hover(function() {

        var texte = $(this).text();
        var tab = new Array;
        tab = texte.split("      ");
            if (tab[0] === "+ Deroule" && verif === false) {
                    $("#submenu").show("slow");
                    verif = true;
            }
            else if (tab[0] === "+ Deroule" && verif === true) {
                        $("#submenu").hide(8000);

 //There, I can clearly see, at the end of the hide animation, the previously opened content blinking once before it hides completely.

                                                     verif = false;
                }                                               
        }); 
});
4

1 回答 1

1

如果没有看到您的 HTML/CSS，很难真正确定问题 -提示提示创建一个小提琴提示提示:) - 但如果我是你，我要做的第一件事是将.hover()方法更改为.mouseenter()and .mouseleave()(NOT .mousein()and .mouseout()- 那是另一个关于 IE 支持的对话——如果你不熟悉，你可以/应该在 jQuery 的网站上查看）。

为什么要这样做？该.hover()方法实际上只是.mouseenter()/的简写，.mouseleave()但由于各种原因（包括它不像两个完整方法那样被广泛支持的事实），它有时无法正常工作。我不能保证这就是这种情况下的问题，但是，特别是因为这似乎是一个浏览器问题，所以最好回到基础并从尽可能多的支持开始。

编辑：

看到您简化的小提琴后，我想我对您的问题和您正在尝试做的事情有了更好的理解。我以前也遇到过同样的问题，根据我的经验，我可以告诉你，这实际上是一个难以解释的问题。

.show()使用, , slide 和 fade 方法显示/隐藏元素时会跳转.hide()，因为一旦动画完成，它们就会从流程中移除（在大多数浏览器中 - 不是 chrome - 显示/隐藏方法不会导致元素缩小一直到什么都没有，所以仍然有波动）。这是我最近针对此问题的两个解决方案：

在一种情况下，我的任务是在菜单中创建多视图和少视图按钮，这将使元素一次出现/消失一个平滑。如果您只是尝试在要显示的集合上调用显示/隐藏、滑动或淡入淡出方法，它们将同时进行动画处理，并且在尝试使它们在回调时运行时会发生同样的事情。此外，滑动方法不起作用，因为该动画将一次在多个项目上调用，从而导致大量开销并使效果在较慢的浏览器中不稳定（甚至在 FF 中有点）。显示/隐藏方法在某些浏览器中有效，因为它们实际上确实减小了元素的大小，但在其他浏览器中它们不稳定，因此它们被淘汰了（实际上，它们的动画在所有浏览器中都没有“完整” - 见上文）。因此，我有三个选择：

解决方案 1： 最初的计划是（在给定的规格下）当时最好的解决方案，是使用 animate 方法简单地滑动包装器div（overflow设置为hidden向上或向下，基于目标元素的偏移量在列表中）。这很好用，但是我被要求通过淡入淡出效果让每个元素连续消失。如果您确实选择了这种方法，那么我建议您改用幻灯片方法 - 因为您不是试图显示更多/更少的链接，这应该不是问题（是的，我知道这听起来可能不像查看更多/更少链接将是一个问题，但我必须实现它的方式，幻灯片确实会导致问题）。

解决方案 2： 单独使用淡入淡出是一个问题，因为所有东西仍然会同时淡出，即使它们没有淡出，一旦淡出完成，动画仍然会跳跃。因此，我需要解决的第一个问题是同时运行的动画。由于开销，使用计时器是不可能的，所以我编写了一个函数，在计算调用之间的必要延迟之后递归调用集合中每个元素的淡入淡出（基于提供的速度参数，以及要褪色）。接下来，我仍然必须在动画完成后解决跳跃问题。为了解决这个问题，我实现了该.fadeTo()方法，从而在动画之后将元素保留在文档流中。然而，这确实导致了另外两个问题：

  1. IE 不支持该.fadeTo()方法（可能在 9 和 10 - 我不记得了）
  2. 动画结束后，由于元素没有从流中移除，所以有很多空白空间

为了解决第一个问题，我为 IE 添加了一个特定于浏览器的方法，一旦它们的淡出完成，它将每个元素的属性设置为display和block它们- 它也在它们的淡入开始之前执行相反的操作。 visibilityhidden

我通过使用我之前描述的动画方法解决了第二个问题。为了完成这项工作，我必须编写另一个辅助方法，根据给定的动画速度和显示/隐藏的元素数量计算容器需要滑动的速度。


我知道这是很多细节，但我希望它可以帮助您确定如何最好地解决这个问题。

在您推进实施时，如果您有任何问题或需要任何澄清，请告诉我。祝你好运！:)

于 2012-10-26T14:13:02.197 回答