jqueryui和svg的反弹效果

Question

i have an SVG file that i would like to manipulate using JQUERYUI , effects like slide in show and hide are working but the bounce effect i just can't figure it out, anybody have any idea about that? 我有一个我想使用JQUERYUI操纵的SVG文件，诸如幻灯片放映和隐藏之类的效果正在起作用，但是反弹效果我却无法弄清楚，有人对此有任何想法吗？

here is my jquery function : 这是我的jQuery函数：

$('#logo').on('click touchstart', function () {
      obj.play();
$('#logo').effect('bounce', {times:5}, 800); 
  });
}

but no effect what so ever, i know i am missing something but i just don't know what is it. 但至今没有任何影响，我知道我缺少了一些东西，但我只是不知道那是什么。 when my function looks like this it works (with other effects) 当我的函数看起来像这样时（其他效果）

$('#logo').on('click touchstart', function () {
      obj.play();
      $('#XMLID_37181_').hide('slide', {direction: 'left'}, 50);
      $('#XMLID_37180_').hide('slide', {direction: 'left'}, 100);
      $('#XMLID_37179_').hide('slide', {direction: 'left'}, 150);
      $('#XMLID_37178_').hide('slide', {direction: 'left'}, 200);
      $('#XMLID_37177_').hide('slide', {direction: 'left'}, 250);
      $('#XMLID_37176_').hide('slide', {direction: 'left'}, 300);
      $('#XMLID_37175_').hide('slide', {direction: 'left'}, 350);
      $('#XMLID_37174_').hide('slide', {direction: 'left'}, 400);
});

Edit 1 : 编辑1：

here is my whole code : 这是我的整个代码：

<html>
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div id="blue_square"></div>
<script>
$.get('square.svg', function(data) {
$(document.body).append(data.documentElement);

$('#blue_square').on('click touchstart', function () {
    $('#blue_square').effect('bounce', {times:5}, 800); 
});
</script>
<style>
#blue_square {
    width: 472px;
    height: 472px;;
    background: #069;
    cursor: pointer;
  }
</style>
</html>

i dunno why the bounce effect doesn't work? 我不知道为什么反弹效果不起作用？ what i am missing now? 我现在想念什么？

Answer 1

 $('#logo').on('click touchstart', function () { $('#logo').effect('bounce', {times:5}, 800); });

 #logo { width: 100px; height: 100px; }

 <html><body> <script src="//code.jquery.com/jquery-1.12.4.js"></script> <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <div id="logo"> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="-4 -4 8 8"> <title>SVG animation using SMIL</title> <circle cx="0" cy="1" r="2" stroke="red" fill="none"> <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0" to="360" begin="0s" dur="1s" repeatCount="indefinite"/> </circle> </svg> </div> </body></html>

jqueryui和svg的反弹效果

问题描述

1 个解决方案

解决方案1
1 已采纳 2017-11-22 19:58:27

jqueryui和svg的反弹效果

问题描述

1 个解决方案

解决方案1 1 已采纳 2017-11-22 19:58:27

解决方案1
1 已采纳 2017-11-22 19:58:27