草庐IT

javascript - 修复 jQuery slideDown 动画末尾的垂直跳转

coder 2024-05-11 原文

我是 Jquery 的新手，但已经编写了一个简单的垂直 Accordion 。这似乎符合我要求的工作，但在向下滑动的末尾有一个明显的颠簸。

如果有人可以查看它并提出解决方案，它会阻止我再拔头发!

这是我的测试页面的链接(我的所有代码 [css、js 等] 都在一个文件中以方便使用):Vertical Accordion

最佳答案

在您的自定义代码中，我通过对 CSS 进行少量更改并在 Accordion 中指定 p 标签的高度来摆脱“跳跃”。

因为你通过脚本隐藏了它们，在你这样做之前:

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

也许您可以遍历并计算出每件作品的高度并将其添加到每个项目样式中，从而消除最后出现的“ SCSS ”。

沿着这些线的东西:

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

编辑

我继续下载了您的页面副本并对其进行了测试，它似乎在一些快速的浏览器测试中运行良好，所以这是您修改后的 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 - 通过在 Accordion 的每个“打开”部分设置一个明确的高度，它消除了抖动的动画。所以我们通过脚本设置这些高度。

关于javascript - 修复 jQuery slideDown 动画末尾的垂直跳转，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4375688/

末尾javascript34sectionaccordionjqueryslidedownjquery-ui-accordion

有关javascript - 修复 jQuery slideDown 动画末尾的垂直跳转的更多相关文章

  1. ruby - 如何将脚本文件的末尾读取为数据文件(Perl 或任何其他语言) - 2

    我正在寻找执行以下操作的正确语法(在Perl、Shell或Ruby中):#variabletoaccessthedatalinesappendedasafileEND_OF_SCRIPT_MARKERrawdatastartshereanditcontinues. 最佳答案 Perl用__DATA__做这个:#!/usr/bin/perlusestrict;usewarnings;while(){print;}__DATA__Texttoprintgoeshere 关于ruby-如何将脚

  2. Unity 3D 制作开关门动画,旋转门制作,推拉门制作,门把手动画制作 - 2

    Unity自动旋转动画1.开门需要门把手先动,门再动2.关门需要门先动,门把手再动3.中途播放过程中不可以再次进行操作觉得太复杂?查看我的文章开关门简易进阶版效果:如果这个门可以直接打开的话,就不需要放置"门把手"如果门把手还有钥匙需要旋转,那就可以把钥匙放在门把手的"门把手",理论上是可以无限套娃的可调整参数有:角度,反向,轴向,速度运行时点击Test进行测试自己写的代码比较垃圾,命名与结构比较拉,高手轻点喷,新手有类似的需求可以拿去做参考上代码usingSystem.Collections;usingSystem.Collections.Generic;usingUnityEngine;u

  3. ruby - 在 Ruby 中，垂直线是什么？ - 2

    1.upto(9){|x|printx}为什么这行不通？{printx|x}}y呢？ 最佳答案 它用于传递给您的block的参数。即在您的示例中，upto将使用1到9中的每个数字调用您的block，当前值可作为x获得。block参数可以有任何名称，就像方法参数一样。例如1.upto(9){|num|putsnum是有效的。就像一个方法的参数一样，一个block也可以有多个参数。例如hash.each_pair{|key,value|puts"#{key}is#{value}"} 关于ru

  4. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  5. ruby - 如何修复 RVM gem "[ missing bin/ruby ]" - 2

    执行rvmlist后，我得到以下输出:rvmrubiesgems[missingbin/ruby]=*ruby-2.0.0-p645[x86_64]ruby-2.1.6[x86_64]ruby-2.2.1[x86_64]gems[missingbin/ruby]是什么意思？gems是某种系统gemset吗？它不是我创建的，我不知道我是否可以或应该删除它。 最佳答案 在我跑完之后:rvmfix-permissions然后我能够卸载具有[缺少bin/ruby]的版本。 关于ruby-如何修复

  6. ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2

    我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan

  7. ruby - 在 ruby​​ 中对字符串进行排序以使空字符串位于末尾的好方法是什么？ - 2

    在Ruby中，默认排序将空字符串放在第一位。['','g','z','a','r','u','','n'].sort给予:["","","a","g","n","r","u","z"]但是，在end处需要空字符串是很常见的。做类似的事情:['','g','z','a','r','u','','n'].sort{|a,b|a[0]&&b[0]?ab:a[0]?-1:b[0]?1:0}工作并给予:["a","g","n","r","u","z","",""]但是，这不是很可读，也不是很灵活。在Ruby中是否有一种合理且干净的方法让sort将空字符串放在最后？只映射到一个没有空字符串的数组，

  8. LVGL V8动画 - 2

    动画/*INITIALIZEANANIMATION 初始化一个动画*-----------------------*/lv_anim_ta;lv_anim_init(&a);/*MANDATORYSETTINGS 必选设置*------------------*//*Setthe"animator"function 设置“动画”功能*/lv_anim_set_exec_cb(&a,(lv_anim_exec_xcb_t)lv_obj_set_x);/*Setthe"animator"function*/lv_anim_set_var(&a,obj);/*Lengthoftheanim

  9. ruby - 从 Ruby 中的数组末尾删除 nil 项 - 2

    给定一个数组:[1,2,nil,nil,3,nil,4,5,6,nil,nil,nil]id喜欢从数组末尾删除nil。用一些丑陋的循环来解决并不难，但我希望有一种Ruby方法可以做到这一点。Result:[1,2,nil,nil,3,nil,4,5,6] 最佳答案 这个怎么样:a.popuntila.last 关于ruby-从Ruby中的数组末尾删除nil项，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.c

  10. javascript - jQuery 的 jquery-1.10.2.min.map 正在触发 404(未找到) - 2

    我看到有关未找到文件min.map的错误消息:GETjQuery'sjquery-1.10.2.min.mapistriggeringa404(NotFound)截图这是从哪里来的？ 最佳答案 如果ChromeDevTools报告.map文件的404(可能是jquery-1.10.2.min.map、jquery.min.map或jquery-2.0.3.min.map，但任何事情都可能发生)首先要知道的是，这仅在使用DevTools时才会请求。您的用户不会遇到此404。现在您可以修复此问题或禁用sourcemap功能。修复:获取文

随机推荐