jqueryui和svg的反彈效果
[英]bounce effect with jqueryui and svg
問題描述
我有一個我想使用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>
我不知道為什么反彈效果不起作用？ 我現在想念什么？
1 個解決方案
解決方案1
1 已采納 2017-11-22 19:58:27
$('#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>
Javascript掉落和彈跳效果
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.