jquery - jQuery 幻灯片函数在 google chrome 浏览器中起作用

Question

我目前正在为我工​​作的机构开发一个新网站，可以在这里找到：

http://www.astwood.co.uk/testsite/wordpress/

右上角有两个按钮，可以向下滑动联系人和关于我们部分的额外内容。我使用以下 jQuery 为额外 div 的外观设置了动画：

在加载时隐藏页面上的内容：

$("#about").hide();
$("#contact").hide();

单击具有指定类的链接时显示和隐藏内容：

$(".aboutbtn").click(function () {
   $('#contact').slideUp(
   function() {

        $('#about').slideToggle('slow');

   });
});

$(".contactbtn").click(function () {
   $('#about').slideUp(
   function() {

        $('#contact').slideToggle('slow');

   });
});

这在大多数浏览器中都能完美运行，如果有一个打开的 div，它将隐藏现有的打开的 div，然后打开指定的部分。但是，在 chrome for mac 中，页面加载后第一次按下按钮时，它将向下滑动请求的内容并立即再次向上滑动。

任何帮助，将不胜感激。提前致谢。

Answer 1

好吧，原来是一个浏览器插件干扰了 jQuery 的工作方式。有问题的浏览器扩展是双击，可以在这里找到：

https://chrome.google.com/webstore/detail/double-click/mdoabndnbhmbbigggngmjbnoijnhfophe

Answer 2

两个想法：

• 自己编排切换动作，而不是依赖.slideToggle()；
• .stop(true,true)在向上/向下滑动请求的元素之前发出问题

这些中的一个或其他或两者一起可能会产生正确的效果，尽管很难知道为什么。

这是两个想法的代码：

$(".aboutbtn").click(function() {
    var $about = $("#about").stop(true,true);
    $("#contact").slideUp(function() {
        var fn = ($about.is(":hidden")) ? 'slideDown' : 'slideUp';
        $about[fn]('slow');
    });
});

Answer 3

$("#about").hide();和可能$("#contact").hide();在 chrome 浏览器中运行较晚（似乎可以在我的 PC 上使用 chrome...）。

尝试在元素上放置 css 样式display:none，而不是使用 jQuery 来隐藏它们。这意味着当浏览器呈现它们时（甚至在 javascript 运行之前）它们将被隐藏。

Answer 4

只需添加 clear: both 到您应用 slideToggle() 的 div/容器

动画需要溢出隐藏，无法正确获取高度。

它对我来说很清楚：两者。