jqueryui 和 svg 的弹跳效果答案

【问题标题】：bounce effect with jqueryui and svgjqueryui 和 svg 的弹跳效果
【发布时间】：2018-05-06 15:57:14
【问题描述】：

我有一个 SVG 文件，我想使用 JQUERYUI 进行操作，像幻灯片显示和隐藏这样的效果可以工作，但是弹跳效果我就是想不通，有人知道吗？

这是我的 jquery 函数：

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

但没有任何效果，我知道我错过了一些东西，但我只是不知道它是什么。当我的函数看起来像这样时它可以工作（具有其他效果）

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

编辑 1：

这是我的全部代码：

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

我不知道为什么反弹效果不起作用？我现在缺少什么？

【问题讨论】：

标签： javascript jquery jquery-ui svg

【解决方案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>

【讨论】：

它在这里工作，但我在我的代码中导入了一个 svg，所以它不能用它，弹跳效果在处理 svg 文件时有问题吗？
我已经用 svg 对象更新了代码。这是工作。确保将对象包装在 #logo 元素中。如果您提供小提琴，我可以进一步研究。