当谈到排队 jQuery Effects 和 jQuery UI Effects 时，我真的很困惑。当我这样做时
$('#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>
非常感谢任何帮助
谢谢比约恩
最佳答案
该行为似乎是 jQuery 中的一个错误
可能的解决方法是
$('#div_id').effect('bounce').effect('shake',function(){$(this).fadeOut()});
感谢大家的贡献和帮助!
关于jquery - 使用 jQuery UI Effects 对 jQuery Effects 进行排队的问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11231974/