jQuery slide is jumpy

Question

I tried to slide in and out a DIV with the toggle function of jQuery but the result is always jumpy at the start and/or end of the animation. Here\'s the js code that I use:

Answer 1

I had the same issue. I fixed it by adding this:

.delay(100)

Guess giving it more time to think helps it along?

Answer 2

The solution is that sliding div must have the width set in pixels. Do not use 'auto' nor '%'. And you will have great result! The problem is in inline elements thats are in a sliding div.

but if they have width in px the height will be identical. Try it.

Answer 3

There are obviously a lot of different solutions to this issue - and depending on your layout, different solutions have different results.

Here was what I had (stripped down)

<div>
   <p>Text</p>
</div>
<div class="hidden">
   <p></p>
</div>

When I would use jQuery to show <div class="hidden">, the margin on the <p> element would collapse with the margin of the <p> element above it.

I thought it was strange since they were in different <divs>.

My solution was to eliminate the margin on the bottom of the <p>. Having a margin on one side prevents the margin from the bottom of the first <p> from collapsing with the top of the second <p>.

This workaround solved my problem, can probably be applied to others, but may not work for all.

Answer 4

I've ran into this problem today. I did notice however that disabling all CSS fixed the problem. Also I knew it worked fine before so it must have been recent changes that caused the issue.

It turned out I used transitions in CSS to ease in and out of hovers.

Once these transitions were removed from the elements I was adding everything was fine.

So if you have the same issue, just add these lines to the elements you're adding:

-webkit-transition: none;
-moz-transition: none;
-o-transition: none;
-ms-transition: none;
transition: none;

(I might have abused transitions a bit by not just adding them to the elements I want to have transitions for, but using them for the entire website.)

Answer 5

You just have to modify the up, down effects in effects.js to have them take into account margins or paddings that may exist and then adjust what they perceive to be the total size of the element to accommodate those values...something along these lines....

Effect.BlindDown = function(element) {
  element = $(element);
  var elementDimensions = element.getDimensions();

//below*
  var paddingtop = parseInt(element.getStyle('padding-top'));
  var paddingbottom = parseInt(element.getStyle('padding-bottom'));
  var totalPadding = paddingtop + paddingbottom;

  if(totalPadding > 0)
  {
   elementDimensions.height = (elementDimensions.height - totalPadding);
  }
//above*

  return new Effect.Scale(element, 100, Object.extend({
    scaleContent: false,
    scaleX: false,
    scaleFrom: 0,
    scaleMode: {originalHeight: elementDimensions.height, originalWidth: elementDimensions.width},
    restoreAfterFinish: true,
    afterSetup: function(effect) {
      effect.element.makeClipping().setStyle({height: '0px'}).show();
    },
    afterFinishInternal: function(effect) {
      effect.element.undoClipping();
    }
  }, arguments[1] || { }));
};

Answer 6

i came across the same bug took days to find a solution. the problem is when the element is hidden jquery is getting the wrong height. top fix it you must get the hight before hiding and use a custom animation to that height. its tricky go here for a better explanation