在jQuery slideDown动画结束时修复垂直跳转 [英] Fixing vertical jump at end of jQuery slideDown animation

问题描述

我是Jquery的新手，但写过一部简单的垂直手风琴。这似乎是我需要的工作，但在下滑结束时有一个可见的混蛋。

I am new to Jquery but have written a simple vertical accordion. It seems to to the job I require, but at the end of the slide down there is a visible jerk.

如果有人能看到它并提出解决方案，那么将阻止我拉出我的头发！

If anyone could look at it and suggest a solution, it will stop me pulling any more of my hair out!

这是我的测试页面的链接（我的所有代码[css，js等]都在一个文件中easy）：垂直手风琴

Here is a a link to my test page (all my code [css, js etc.] is in one file for ease) : Vertical Accordion

推荐答案

在你的自定义代码中，我通过在CSS中进行一些小改动并指定手风琴中p标签的高度来摆脱跳跃。

In your custom code, I got rid of the 'jump' by making a small change in the CSS and specifying the height of the p tags within the accordion.

由于您在执行此操作之前将其全部隐藏起来：

Since you hide them all via script, before you do:

$(".accordion p:not(:first)").hide(); 

也许你可以走过去并获得每件作品的计算高度并将其添加到每件商品样式中，从而消除了你最后得到的混蛋。

maybe you could walk through and get the calculated heights of each piece and add that to each items style, thereby eliminating that "jerk" you get at the end.

这些内容：

$('.accordion p').each(function(index) {
   $(this).css('height', $(this).height());
});

编辑

我继续下载并下载你的页面的副本并对其进行了测试，它似乎在一些快速的浏览器测试中正常工作，所以这里是你修改过的vaccordian.js：

Edit

I went ahead and downloaded a copy of your page and tested this, and it seems to work fine in a few quick browser tests, so here's your revised vaccordian.js:

$(document).ready(function(){   
    $('.accordion p').each(function(index) {
       $(this).css('height', $(this).height());
    });


    $(".accordion h3:first").addClass("active");
    $(".accordion p:not(:first)").hide();


    $(".accordion h3").click(function(){
        $(this).next("p").slideToggle("slow")
        .siblings("p:visible").slideUp("slow");
        $(this).toggleClass("active");
        $(this).siblings("h3").removeClass("active");
    });
});

TL; DR - 通过在手风琴的每个开口部分设置显式高度，它会移除生涩的动画。所以我们通过脚本设置这些高度。

TL;DR - by setting an explicit height on each 'opening' part of the accordion, it removes the jerky animation. so we set those heights via script.

这篇关于在jQuery slideDown动画结束时修复垂直跳转的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！