SlideUp / SlideDown 导致跳跃答案

【问题标题】：SlideUp / SlideDown causes a jumpSlideUp / SlideDown 导致跳跃
【发布时间】：2019-09-07 04:07:59
【问题描述】：

我在我的一个网页上使用slideUp 和slideDown JQuery 幻灯片效果来获得基本搜索和带有更多/更少选项的高级搜索。它运行良好。我正在使用此代码。但问题是当我单击更多选项时，它会在滑动时跳跃。但是当我在管理员模式下使用相同的（以管理员身份登录网站后）时，它运行顺利。我尝试了很多我在互联网上找到的方法，但无法解决。如果我的代码有任何问题，谁能检查我的代码？

感谢您的宝贵时间。

编辑：什么时候跳？ - 默认情况下有一个基本搜索和一个“更多选项按钮”当我单击更多选项，它会向上滑动基本搜索并向下滑动高级搜索同时进行，当高级搜索滑下时即将完成，它突然跳跃。我希望这是有道理的。

EDIT2：这是 fiddle。这是示例代码，因为我在高级搜索中有一些选择语句，我们可以清楚地看到它何时跳转。

<script>
    jQuery.noConflict();
    jQuery(document).ready(function($) {
        $(".view-filters").hide();
        $(".more").click(function() {

            $(".search-form").slideUp("slow");
            $(".view-filters").slideDown("slow");
        });
        $(".less").click(function() {
            $(".view-filters").slideUp("slow");
            $(".search-form").slideDown("slow");
        });
    });
</script>

<< There is some code here for Search form. >>

<div class = "search-form more"><b>More Options</b> <img src = "images/down_arrow.jpg"></img></div>
<div class = "view-filters less"><b>Less Options</b> <img src = "images/up_arrow1.jpg"></img></div>

<style>
    .search-form
    {
        overflow: hidden;

    }
    .view-filters
    {
        display:block;
    }
    .pager
    {
        display:none;
    }
    table
    {
        display:none;
    }
</style>

<< There is some code here for Advanced Search Form>>

【问题讨论】：

管理员模式有什么改变吗？它是否会向页面添加更多内容、加载任何新脚本、更改 css...？
No 它不会增加或改变任何东西。
我无法测试您的代码，但根据我的经验，当动画元素中涉及填充时，slideUp/slideDown 会跳转。尝试暂时禁用所有填充（如果您想完全确定，请尝试禁用所有边距）并进行测试。告诉我们您发现了什么，或提供更有用的代码进行测试。
请注意：只要你不想使用XHTML 但html5 那么img 就是void (empty) elements [...]Void elements only have a start tag; end tags must not be specified for void elements.[...]

标签： jquery slidetoggle slidedown slideup

【解决方案1】：

你的 jsfiddle 模型中的 HTML 是你真正拥有的吗？它缺少“更少选项”的关闭</div>，而且对于每次单击，您都有两个元素向上滑动和两个元素向下滑动。如果单向滑动一个元素，效果会更好。

你能像这样嵌套你的元素吗：

<div class="search-form">
There is some code for the basic search here.
<div class="more"><b>More Options</b></div>
</div>

<div class="view-filters">
<div class="less"><b>Less Options</b></div>
There is some code for the advanced search here.
</div>

jsfiddle

或者甚至是like this。

【讨论】：

【解决方案2】：

对于任何有类似问题的人来说，首要问题似乎在于某些元素的 margin 值。

在包含 Bootstrap 3.3.7 的页面上，我在包含 <h3> 以及其他一些内容的 div 上使用了 slideUp()。

我在div 上调用slideUp() 后立即停止跳跃的关键是在它包含的<h3> 上设置margin-top:0px。

【讨论】：