JQuery slideup and slidedown is not smooth enough

Question

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

Answer 1

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

Answer 2

如果你的动画不平滑，你需要给slidedUp / slidedDown的元素一个像素宽度（不是百分比！），这在大多数时候都有帮助。

Answer 3

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.

Answer 4

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

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

Answer 5

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

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

That should get all the smoothness you need.

Answer 6

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.

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

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