Menu
I'm really confused when it comes to queuing jQuery Effects and jQuery UI Effects. When I do
$('#div_id').effect('bounce').effect('shake').fadeOut();
the div bounces first than fades out but shake is omitted.
Calling
$('#div_id').effect('bounce').effect('shake');
everything works like I expected it (first bounce than shake).
Also
$('#div_id').effect('bounce').fadeOut();
works just like expected
here is a full example:
<!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>
any help is highly appreciated
thanks Björn
505
the beaviour seems to be a bug in jQuery
a possible workaround is
$('#div_id').effect('bounce').effect('shake',function(){$(this).fadeOut()});
thanks to everyone for contributing and helping out!
189
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With