CODEWITHSUNDEEP
jqueryslidetoggle
Matt Elhotiby
Matt Elhotiby

Reputation: 44066

JQuery slideup and slidedown is not smooth enough

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

Upvotes: 2

Views: 25481

Answers (6)

mRizvandi
mRizvandi

Reputation: 1093

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.

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

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

Upvotes: 2

Ando
Ando

Reputation: 1827

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.

Upvotes: 3

nerdess
nerdess

Reputation: 10920

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.

Upvotes: 4

Rod
Rod

Reputation: 2066

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.

Upvotes: 1

Taylor Bird
Taylor Bird

Reputation: 8007

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/

Upvotes: 1

Sarfraz
Sarfraz

Reputation: 382696

You might want to incorporate the easing plugin for smoother animation.

Upvotes: 7

Related Questions