使用jqueryui效果排队jQuery效果的问题_Jquery_Jquery Ui

使用jqueryui效果排队jQuery效果的问题

jquery jquery-ui

使用jqueryui效果排队jQuery效果的问题,jquery,jquery-ui,Jquery,Jquery Ui,当涉及到排队jQuery效果和jQuery UI效果时，我真的很困惑。当我这样做的时候 $('#div_id').effect('bounce').effect('shake').fadeOut(); div首先反弹，然后淡出，但忽略了抖动召唤 $('#div_id').effect('bounce').effect('shake'); 一切都像我预期的那样工作（第一次反弹而不是摇晃）也就像预期的那样以下是一个完整的示例： <!DOCTYPE html> <html

当涉及到排队jQuery效果和jQuery UI效果时，我真的很困惑。当我这样做的时候

$('#div_id').effect('bounce').effect('shake').fadeOut();

div首先反弹，然后淡出，但忽略了抖动

召唤

$('#div_id').effect('bounce').effect('shake');

一切都像我预期的那样工作（第一次反弹而不是摇晃）

也

就像预期的那样

以下是一个完整的示例：

<!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>


$（文档）.ready（函数（）{
变量平方=$（'平方'）；
$（“#按钮_1”）。单击（函数（）{
square.effect（'bounce'）；//确定
});
$（“#按钮_2”）。单击（函数（）{
square.effect（'bounce'）。effect（'shake'）；//确定（首先反弹，然后抖动）
});
$（“#按钮_3”）。单击（函数（）{
square.effect（'bounce'）.fadeOut（）；//确定（首先反弹，然后淡出）
});
$（“#按钮_4”）。单击（函数（）{
square.effect（'bounce'）.effect（'shake'）.fadeOut（）；//失败（首先反弹，然后淡出）
});
});

反弹
弹跳震动
反弹衰减
反弹抖动衰减

非常感谢您的帮助

谢谢Björn

您可以将回调放入

#按钮4

$("#button_4").click(function() {
      square.effect('bounce',function(){
            $(this).effect('shake',{ times:3 }, 300).fadeOut()          
      });
});

例如：

解释：

不确定哪里出了问题，但我建议明确使用回调，如下所示：

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

更新

我刚刚更新了一个工作解决方案的代码

工作示例：

beaviour似乎是jQuery中的一个bug

一个可能的解决办法是

$('#div_id').effect('bounce').effect('shake',function(){$(this).fadeOut()});

感谢大家的贡献和帮助

有趣的是，我注意到它会抖动，但在逐渐消失后，因为它直到某个时候才会发出震动..这是..谢谢-我知道我可以做到这一点，但我仍然想知道为什么仅仅链接jQuery对象上的调用是不可能的。很抱歉，这也不起作用..@Goonie是的，我看到了..。）但我不知道jQuery UI中的链接到底发生了什么工作正常，但每当我尝试在链接中使用

fadeOut（）

时，它之前不会使用多个效果。您可以看到反弹-抖动-反弹工作正常，但反弹-抖动-淡出不工作…有任何特殊原因吗？JQuery是否不允许链接？我们必须总是在JQuery函数中使用回调吗？@Asif我不太清楚，我认为问题在于逐渐消失。。它不太喜欢chainig，也许在调用它之前它只能接受一个效果，而不需要等待上一个动画的执行。在回调时调用它可以解决问题，并强制它在之后启动。检查我的这个，并与你的比较..好的-最后一把小提琴正在工作。。。不过，我的问题是为了理解为什么连锁电话不起作用。那么这是一只虫子吗？或者它不打算像我那样被调用吗？不确定，只在淡出之前使用回调就可以了。我会说这是一只虫子。

$('#div_id').effect('bounce').effect('shake',function(){$(this).fadeOut()});