使用jQuery UI Effects排队jQuery Effects的问题
使用jQuery UI Effects排队jQuery Effects的问题
提问于 2012-06-28 01:37:49
当涉及到排队jQuery效果和jQuery UI效果时，我真的很困惑。当我这样做的时候
$('#div_id').effect('bounce').effect('shake').fadeOut();div首先反弹，然后淡出，但忽略了抖动。
呼叫
$('#div_id').effect('bounce').effect('shake');一切都像我预期的那样工作(第一次弹跳比摇晃)。
也是
$('#div_id').effect('bounce').fadeOut();和预期的一样工作
下面是一个完整的示例：
<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
var square = $('#square');
$("#button_1").click(function() {
square.effect('bounce'); // ok
});
$("#button_2").click(function() {
square.effect('bounce').effect('shake'); // ok (bounces first, than shakes)
});
$("#button_3").click(function() {
square.effect('bounce').fadeOut(); // ok (bounces first, than fades out)
});
$("#button_4").click(function() {
square.effect('bounce').effect('shake').fadeOut(); // fail (bounces first, than fades out)
});
});
</script>
</head>
<body>
<p></p><p></p><p></p><p></p>
<div id="square" style="width: 100px; height: 100px; background: blue; position: relative;"></div>
<button id="button_1">bounce</button>
<button id="button_2">bounce shake</button>
<button id="button_3">bounce fadeOut</button>
<button id="button_4">bounce shake fadeOut</button>
</body>
</html>任何帮助都是非常感谢的
谢谢比约恩
回答 3
Stack Overflow用户
回答已采纳
发布于 2012-06-28 14:29:59
beaviour似乎是jQuery中的一个bug
一种可能的解决方法是
$('#div_id').effect('bounce').effect('shake',function(){$(this).fadeOut()});感谢大家的贡献和帮助！
Stack Overflow用户
发布于 2012-06-28 01:46:43
您可以将回调放在#button_4中
$("#button_4").click(function() {
square.effect('bounce',function(){
$(this).effect('shake',{ times:3 }, 300).fadeOut()
});
});示例：working example ..maybe ^_^
解释：http://www.w3schools.com/jquery/jquery_callback.asp
Stack Overflow用户
发布于 2012-06-28 01:47:37
不知道哪里出了问题，但我建议明确使用回调，如下所示：
var square = $('#square');
$("#button_1").click(function() {
square.effect('bounce'); // ok
});
$("#button_2").click(function() {
square.effect('bounce').effect('shake'); // ok (bounces first, than shakes)
});
$("#button_3").click(function() {
square.effect('bounce').fadeOut(); // ok (bounces first, than fades out)
});
$("#button_4").click(function() {
square.effect('bounce').effect('shake',function(){$(this).fadeOut()});
});更新
我刚刚更新了一个有效解决方案的代码。
工作示例：jsfiddle
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/11231974
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号