我有一个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>
我不知道为什么反弹效果不起作用?我现在缺少什么?
答案 0 :(得分:1)
$('#logo').on('click touchstart', function () {
$('#logo').effect('bounce', {times:5}, 800);
});
&#13;
#logo {
width: 100px;
height: 100px;
}
&#13;
<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>
&#13;