jQuery JQuery上滑和下滑不够流畅

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/3231279/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 15:03:43  来源:igfitidea点击:

JQuery slideup and slidedown is not smooth enough

jqueryslidetoggle

提问by Matt Elhotiby

I am implementing a slide dropdown and i am using this code

我正在实现一个幻灯片下拉菜单,我正在使用此代码

$(document).ready(function(){
    $('.drop').click(function(){
        var $next = $(this).parent().next('li.drop_down');
        if($next.is(':visible')) {
            $next.slideUp();
        } else {
            $next.slideDown();
        }
    });
});

but the client claims that it is not smooth enough. He wants to expand really smooth, so is there a way to make it smoother

但客户声称它不够流畅。他想扩展得非常平滑,所以有没有办法让它更平滑

回答by Sarfraz

You might want to incorporate the easing pluginfor smoother animation.

您可能想要合并缓动插件以获得更流畅的动画。

回答by nerdess

If your animation is not smooth you need to give the element that gets slidedUp/slidedDown a width in pixel (not in percent!), this helps me most of the time.

如果你的动画不流畅,你需要给被 slidedUp/slidedDown 的元素一个像素宽度(不是百分比!),这在大多数情况下对我有帮助。

回答by Ando

I just came across your question and I have the same problem. For men what fixed it is to remove padding. I don't know but for some reason it is not taken into account as a total of the element's height.

我刚刚遇到你的问题,我也有同样的问题。对于男人来说,固定的是去除填充物。我不知道,但由于某种原因,它没有被视为元素的总高度。

回答by mRizvandi

according to all answers and my experience:

根据所有答案和我的经验:

  1. don't use min-height.
  2. don't use padding (set padding for inside of container is ok).
  3. don't use width in percent.
  1. 不要使用最小高度。
  2. 不要使用填充(为容器内部设置填充是可以的)。
  3. 不要使用百分比宽度。

p.s. 1: you can use responsive width (in percent), but you have remove padding (set internal container element padding).

ps 1:您可以使用响应宽度(以百分比为单位),但您已删除填充(设置内部容器元素填充)。

p.s. 2: you can use fixed width and padding together, sometimes its work properly.

ps 2:你可以同时使用固定宽度和填充,有时它可以正常工作。

回答by Taylor Bird

You could try the jQuery UIlibrary. The Event() class provides a Slide effect where you can adjust speed and other presentation-related attributes

你可以试试jQuery UI库。Event() 类提供了一种幻灯片效果,您可以在其中调整速度和其他与演示相关的属性

http://jqueryui.com/demos/effect/

http://jqueryui.com/demos/effect/

回答by Rodrigo

You can incrase the animation duration by adding a number of ms inside the slideUp/slideDown()'s:

您可以通过在 slideUp/slideDown() 内添加一些毫秒来增加动画持续时间:

    if($next.is(':visible')) {
        $next.slideUp(2500);
    } else {
        $next.slideDown(2500);
    }

That should get all the smoothness you need.

这应该会获得您需要的所有平滑度。