我在SVG中使用jQuery animate函数进行切换,但是应用于" cs"属于我的"圈" SVG元素。
$('#filtres-reglages ul li label input:checkbox').click(function (e) {
var oswitch = $(this).parent().find("svg#switch");
var path = oswitch.find("path");
var circle = oswitch.find("circle");
if($(this).is(':checked')) {
$(circle).animate(
{'foo':20},
{
step: function(foo) {
$(this).attr('cx', 10+foo);
},
duration: 200
}
);
} else {
$(circle).animate(
{'foo':20},
{
step: function(foo) {
$(this).attr('cx', 30-foo);
},
duration: 200
}
);
}
});
HTML:
<label>
<svg id="switch" class="switch-off" xml:space="preserve" enable-background="new 0 0 40 20" viewBox="0 0 40 20" y="0px" x="0px" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1">
<g>
<g>
<path d="M30,0L30,0L30,0H10C4.5,0,0,4.5,0,10c0,5.5,4.5,10,10,10h20l0,0h0c5.5,0,10-4.5,10-10C40,4.5,35.5,0,30,0z " fill="#CCCCCC">
</g>
<g>
<circle r="8" cy="10" cx="10" fill="#FFFFFF">
</g>
</g>
</svg>
<input type="checkbox" name="champs_societes[]" value="capital_int">
<span>Capital</span>
</label>
当我的复选框被选中时,我增加cx,当没有选中时,我递减。
但渐进式动画只是第一次使用。之后,开关直接从30到10,从10到30.为什么?
感谢您的帮助
答案 0 :(得分:1)
您要做的是将foo从0设置为20,然后再将其设置为0。
你实际做的是0到20然后是20.但是在第二部分你从30中减去了值,所以你实际上只是在一个动画步骤中从20跳到(30-20)。 / p>
这是你应该做的事情:
$('label input:checkbox').click(function (e) {
var oswitch = $(this).parent().find("svg#switch");
var path = oswitch.find("path");
var circle = oswitch.find("circle");
if($(this).is(':checked')) {
$(circle).animate(
{'foo':20},
{
step: function(foo) {
$(this).attr('cx', 10+foo);
},
duration: 200
}
);
} else {
$(circle).animate(
{'foo':0},
{
step: function(foo) {
$(this).attr('cx', 10+foo);
},
duration: 200
}
);
}
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>
<svg id="switch" class="switch-off" xml:space="preserve" enable-background="new 0 0 40 20" viewBox="0 0 40 20" y="0px" x="0px" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1">
<g>
<g>
<path d="M30,0L30,0L30,0H10C4.5,0,0,4.5,0,10c0,5.5,4.5,10,10,10h20l0,0h0c5.5,0,10-4.5,10-10C40,4.5,35.5,0,30,0z " fill="#CCCCCC"/>
</g>
<g>
<circle r="8" cy="10" cx="10" fill="#FFFFFF"/>
</g>
</g>
</svg>
<input type="checkbox" name="champs_societes[]" value="capital_int">
<span>Capital</span>
</label>
&#13;