如何使用jQuery UI幻灯片效果制作更流畅的动画
如何使用jQuery UI幻灯片效果制作更流畅的动画
提问于 2013-01-13 11:46:57
我正在尝试使用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;
}回答 1
Stack Overflow用户
回答已采纳
发布于 2013-01-13 12:35:19
好的，试试这个：
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>即可。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/14300485
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号