jqueryuiとsvgでバウンス効果

私はJQUERYUIを使って操作したいSVGファイルを持っていますが、showとhideのスライドのような効果は働いていますが、バウンス効果は分かりません。それ？ここjqueryuiとsvgでバウンス効果

は私の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>

バウンス効果がない理由、私は知りません作業？私は今何が欠けているのですか？

出典

2017-11-22 Mohamed Mokhtar

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

出典

2017-11-22 19:58:27

、それはここで動作しますが、それはそれでは動作しませんので、私は私のコードでSVGをインポートしていますが、バウンス効果は、SVGファイルでの作業に問題があるのでしょうか？ –

私はコードをsvgオブジェクトで更新しました。それは働いている。 #logo要素の中にオブジェクトをラップしていることを確認してください。あなたがフィドルを提供するなら、私はそれをもっと見ることができます。 –

jqueryuiとsvgでバウンス効果

答えて

関連する問題