Question

我目前正在制作一个小导航菜单。在其中一个下拉菜单中，我需要一个类别来扩展。有用。但是，当类别在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;
                }                                               
        }); 
});

Answer 1

如果没有看到您的HTML / CSS，实际上很难解决问题 - 暗示提示创建小提示暗示提示 :) - 但我会做的第一件事如果我是你，则将.hover()方法更改为.mouseenter()和.mouseleave()（非.mousein()和.mouseout() - 这是关于IE支持的另一个对话 - 您可以/如果你不熟悉，应该在jQuery的网站上查看。

为什么这样？ .hover()方法实际上只是.mouseenter() / .mouseleave()的简写，但由于各种原因（包括它没有像两个完整方法那样广泛支持的事实），它偶尔会失败好好工作。我无法保证在这种情况下这是问题，但是，特别是因为这似乎是一个浏览器问题，所以最好回到基础并尽可能多地获得支持。

修改

在看到简化的小提琴后，我想我更了解你的问题是什么以及你想做什么。我以前遇到过同样的问题，根据我的经验，我可以告诉你，这实际上是一个难以解决的问题。

元素在使用.show()，.hide()，幻灯片和淡入淡出方法显示/隐藏时跳转，因为动画一完成就会从流中删除（在大多数浏览器中 - 不是chrome - show / hide方法不会导致元素一直缩小为零，因此仍然存在不稳定性。以下是我最近解决此问题的两个方法：

在某种情况下，我的任务是在菜单中创建视图更多和无视图按钮，这样可以使元素一次只显示/消失一个。如果您只是尝试在要显示的集合上调用show / hide，slide或fade方法，它们将同时生成动画，并且在尝试使它们在回调上运行时会发生同样的事情。另外，滑动方法不起作用，因为这个动画一次会在多个项目上被调用，从而导致很多开销，并且在较慢的浏览器中使效果不稳定（甚至在FF中有点）。 show / hide方法在某些浏览器中起作用，因为它们实际上确实减小了元素的大小，但是在其他浏览器中它们是不稳定的，因此它们已经出局（实际上，它们的动画在所有浏览器中都没有“完成” - 见上文）。因此，我留下了三个选项：使用淡入淡出，动画或两者的组合。

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

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

IE中不支持.fadeTo()方法（可能在9和10 - 我不记得了）

动画制作后，由于元素未从流程
中移除，因此存在大量空白空间
为了解决第一个问题，我为IE添加了一个特定于浏览器的方法，该方法将每个元素的display属性设置为block，将visibility设置为hidden一旦他们的淡出完成 - 它们在他们的淡出开始之前也做了相反的事情。

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

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

如果您在实施过程中遇到任何问题或需要任何澄清，请与我们联系。祝好运！：）

在jQuery hide（）之后div闪烁一次

1 个答案: