How to make a smoother animation with jQuery UI slide effect

Question

I am trying to use the jQuery UI slide effect for the animated appearance of buttons inside a slidedown menu but the animation of the buttons sliding from left to right seems too jagged especially when there is more code involved. Is there a way to make it smoother? Is this an issue with the timing of loading the elements' (images/buttons) position and if so how can I fix it or is it something else?

Here is an example:

http://jsfiddle.net/userdude/ptnaP/6/

The code in the jsFiddle link above includes a live link to the jQuery UI bundle... but using a custom minimized version, including only the core elements and the slide and drop effects libraries doesn't seem to make the animation any smoother.

jQuery:

$(document).ready(function(){
$(".bc").hide();
$(".bc img").hide();
$("#header").click(function(){

var selectedEffect = "slide";
$(".bc").stop(true, true).delay(500).slideDown(500);
$("#1").stop(true, true).delay(800).effect(selectedEffect,600);
$("#2").stop(true, true).delay(1200).effect(selectedEffect,600);
$("#3").stop(true, true).delay(1600).effect(selectedEffect,600);
});

});

HTML:

<div id="header">Click Me</div>
<div class="bc">
  <img src="http://i49.tinypic.com/t9a8sn.png" id="1" />
  <img src="http://i49.tinypic.com/t9a8sn.png" id="2"/>
  <img src="http://i49.tinypic.com/t9a8sn.png" id="3"/>
</div>

CSS:

div.bc {
border: 15px #1d1d1d solid;
border-radius:10px;
margin:50px auto;
width: 320px;
height: 250px;
}
div.bc img {
margin-top:22px;
width:283px;
height:53px;
}

I reformatted your fiddle's markup and code to fit with how jsFiddle expects it to formatted. — Jared Farrish, Jan 13 '13 at 04:01
do the animations yourself with `animate` & `absolute` `position`ing. that's the only way to make the animations work exactly how you want without jerkiness. http://stackoverflow.com/a/12906254/1382306 — , Jan 13 '13 at 04:03
Do you need to use jQuery UI? If you're open to using just CSS, I can write an answer for you that uses CSS transitions. — alt, Jan 13 '13 at 04:05
Callback function is the key.see the updated fiddle. http://jsfiddle.net/bQwbw/ — Himal, Jan 13 '13 at 04:05
@Himal - Why don't you post that as an answer? The only possible complication is that with a callback, each effect completes before the next begins the effect. If you notice, there's a `200ms` overlap, so they're staggered. I don't know how important that is, but the "fix" I propose below essentially deals with method as-is. I would suggest you post that, though, as it's certainly not incorrect. — Jared Farrish, Jan 13 '13 at 04:44
@JaredFarrish Yes, I've noticed that.your method is much smoother.OP should go for that. — Himal, Jan 13 '13 at 05:22

score 2 · Accepted Answer · answered Jan 13 '13 at 04:35

Alright, try this:

CSS

div.bc {
  border: 15px #1d1d1d solid;
  -moz-border-bottom-colors: #171717 #171717 #171717 #171717 #b89f7d #171717 #202020 #3a3939 #b89f7d;
  -moz-border-top-colors: #171717 #171717 #171717 #171717 #b89f7d #171717 #202020 #3a3939 #b89f7d;
  -moz-border-left-colors: #171717 #171717 #171717 #171717 #b89f7d #171717 #202020 #3a3939 #b89f7d;
  -moz-border-right-colors: #171717 #171717 #171717 #171717 #b89f7d #171717 #202020 #3a3939 #b89f7d;
  border-radius:10px;
  margin:50px auto;
  width: 320px;
  padding: 0;
  height: 250px;
}
div.bc img {
  display: inline-block;
  margin-top:22px;
  width: 282px;
  border: 19px solid transparent;
  border-top-width: 0;
  border-bottom-width: 0;
  height:53px;
}

jQuery

<div id="header">Click Me</div>
<div class="bc">
  <img src="http://i49.tinypic.com/t9a8sn.png" id="1" />
  <img src="http://i49.tinypic.com/t9a8sn.png" id="2" />
  <img src="http://i49.tinypic.com/t9a8sn.png" id="3" />
</div>
<script src="http://code.jquery.com/jquery-1.8.3.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js" type="text/javascript"></script>
<script>
  (function load($) {
    var $bc = $(".bc"),
      $imgs = $bc.children("#1, #2, #3"),
      $header = $("#header"),
      effect = 'slide';

    $bc.hide();
    $imgs.hide();

    $header.click(function() {
      $bc.hide();
      $imgs.hide();

      $bc.stop(true, true).delay(500).slideDown(500);

      $imgs
        .filter('#1').delay(800).effect(effect, 600).end()
        .filter('#2').delay(1200).effect(effect, 600).end()
        .filter('#3').delay(1600).effect(effect, 600).end();
    });
  })(jQuery);
</script>

http://jsfiddle.net/userdude/ptnaP/9/

See if you can spot the problem. Also, drop the XHTML doctype. Just use <!doctype html>.

How to make a smoother animation with jQuery UI slide effect

1 Answers1