如何使用 jQuery UI 幻灯片效果制作更流畅的动画答案

【问题标题】：How to make a smoother animation with jQuery UI slide effect如何使用 jQuery UI 幻灯片效果制作更流畅的动画
【发布时间】：2013-01-13 03:46:56
【问题描述】：

我正在尝试使用 jQuery UI 幻灯片效果来实现下拉菜单中按钮的动画外观，但从左到右滑动的按钮动画似乎过于锯齿，尤其是在涉及更多代码时。有没有办法让它更流畅？这是加载元素（图像/按钮）位置的时间问题吗？如果是，我该如何解决它还是其他问题？

这是一个例子：

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

上面的 jsFiddle 链接中的代码包含一个指向 jQuery UI 包的实时链接...但是使用自定义最小化版本，仅包括核心元素和滑动和拖放效果库似乎不会使动画任何更流畅。

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;
}

【问题讨论】：

我重新格式化了你的 fiddle 的标记和代码以适应 jsFiddle 期望它的格式。
使用animate & absolute positioning 自己制作动画。这是使动画完全按照您想要的方式工作而不会出现抖动的唯一方法。 stackoverflow.com/a/12906254/1382306
你需要使用jQuery UI吗？如果您愿意只使用 CSS，我可以为您写一个使用 CSS 过渡的答案。
回调函数是关键。见更新的小提琴。 jsfiddle.net/bQwbw
@Himal - 你为什么不把它作为答案发布？唯一可能的复杂情况是，使用回调，每个效果在下一个效果开始之前完成。如果您注意到，有一个200ms 重叠，所以它们是交错的。我不知道这有多重要，但我在下面提出的“修复”基本上是按原样处理方法。不过，我建议您发布它，因为它肯定不是错误的。

标签： jquery css user-interface slide

【解决方案1】：

好的，试试这个：

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/

看看你是否能发现问题。另外，删除XHTML 文档类型。只需使用<!doctype html>。

【讨论】：

Thx 现在看起来真的很棒