我设置了两组两个函数来对 SVG 进行动画处理，一组是垂直循环(Rightscale.verticalUp 和 Rightscale.verticalDown)，一组是水平循环(Rightscale.horizontalUp 或 Rightscale.horizontalDown)。单击 SVG 应该在每个循环之间交替 - 停止一个循环并无限地启动另一个循环。我该怎么做呢？我猜想我需要找出刚刚调用的函数，杀死它并从备用循环中调用函数？
任何帮助将不胜感激
var Rightscale = {
identifier: 0,
svgEl: $('#right').find('svg'),
svgH: $('#right').find('.scale').height(),
svgW: $('#right').find('.scale').width(),
cntH: $('#right').height(),
cntW: $('#right').width(),
init: function() {
Rightscale.svgEl.on("click", function() {
if(Rightscale.svgEl == 0 || 3 || 4) {
// Here I want to stop Rightscale.horizontalUp or Rightscale.horizontalDown if it is running but how?
Rightscale.verticalUp(Rightscale.svgEl)
} else if(Rightscale.svgEl == 1 || 2) {
// Here I want to stop Rightscale.verticalUp or Rightscale.verticalDown if it is running, how can I do this?
Rightscale.horizontalWide(Rightscale.svgEl)
}
});
},
verticalUp: function($elt) {
var scaleH = Rightscale.cntH / Rightscale.svgH;
Rightscale.identifier = 1
$elt.css('transform', 'scaleY(' + scaleH + ')')
var verticalUpTimeout = setTimeout(function(){
Rightscale.verticalDown($elt);
}, 5000);
console.log(Rightscale.identifier)
},
verticalDown: function($elt) {
Rightscale.identifier = 2
$elt.css('transform', 'scaleY(1)')
var verticalDownTimeout = setTimeout(function(){
Rightscale.verticalUp($elt);
}, 5000);
console.log(Rightscale.identifier)
},
horizontalWide: function($elt) {
Rightscale.identifier = 3
var scaleW = Rightscale.cntW / Rightscale.svgW;
$elt.css('transform', 'scaleX(' + scaleW + ')')
var horizontalWideTimeout = setTimeout(function(){
Rightscale.horizontalSmall($elt);
}, 5000);
console.log(Rightscale.identifier)
},
horizontalSmall: function($elt) {
Rightscale.identifier = 4
$elt.css('transform', 'scaleX(1)')
var horizontalSmallTimeout = setTimeout(function(){
Rightscale.horizontalWide($elt);
}, 5000);
console.log(Rightscale.identifier)
}
}
$(document).ready(function() {
Rightscale.init();
});#right {
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
}
.scale {
font-size: 0px;
width: 20%;
}
svg {
transition: transform 5000ms linear;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="right">
<div class="scale">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
style="enable-background:new 0 0 0 100;" xml:space="preserve">
<g>
<path d="M81.2,117.5c-6.6,8.8-17.5,13-34.8,13c-17.7,0-28.6-4.3-35.2-13.9c-5.3-7.5-7.7-17.1-8.5-32.4c-0.2-4.3-0.4-9.8-0.4-16.6
c0-18.4,0.9-27.3,3.6-37.3C7.2,25.5,9.2,21,11.7,17C18.5,6.7,29,2,45.6,2c17.3,0,27.9,3.8,34.6,12.4c7.9,10.2,10.4,22,10.4,51.2
C90.6,93.4,87.9,108.1,81.2,117.5z M57.4,66.1l-0.2-16.4C56.9,24,56.1,21.9,46.9,21.9c-6.2,0-9.4,3.4-10.2,10.9
c-0.6,7.5-0.9,21.8-0.9,38.4c0,13,0.2,25,0.8,29.4c0.8,6.2,4.1,9.4,10,9.4c5.6,0,9-3.2,9.8-9.6c0.6-4.5,1.1-19.2,1.1-31.1V66.1z"/>
</g>
</svg>
</div>
</div>最佳答案
您的问题在这一行:
if(Rightscale.svgEl == 0 || 3 || 4) {
将该行更改为:
if([0, 3, 4].indexOf(Rightscale.identifier)>-1) {
如果 Rightscale.svgEl 为 0，则测试条件返回 true，否则 3:在任何情况下它始终为 true。
此外，如果新的点击发生在小于超时延迟的时间内，则清除超时:
要考虑的最后一个方面是转换结束事件:为此您可以查看 transitionend .
var Rightscale = {
identifier: 0,
svgEl: $('#right').find('svg'),
svgH: $('#right').find('.scale').height(),
svgW: $('#right').find('.scale').width(),
cntH: $('#right').height(),
cntW: $('#right').width(),
timerId: -1,
init: function() {
Rightscale.svgEl.on("click", function(e) {
clearTimeout(Rightscale.timerId);
if([0, 3, 4].indexOf(Rightscale.identifier)>-1) {
// Here I want to stop Rightscale.horizontalUp or Rightscale.horizontalDown if it is running but how?
Rightscale.verticalUp(Rightscale.svgEl)
} else if ([1, 2].indexOf(Rightscale.identifier)>-1) {
// Here I want to stop Rightscale.verticalUp or Rightscale.verticalDown if it is running, how can I do this?
Rightscale.horizontalWide(Rightscale.svgEl)
}
});
},
verticalUp: function($elt) {
var scaleH = Rightscale.cntH / Rightscale.svgH;
Rightscale.identifier = 1
$elt.css('transform', 'scaleY(' + scaleH + ')')
Rightscale.timerId = setTimeout(function(){
Rightscale.verticalDown($elt);
}, 5000);
//console.log(Rightscale.identifier)
},
verticalDown: function($elt) {
Rightscale.identifier = 2
$elt.css('transform', 'scaleY(1)')
Rightscale.timerId = setTimeout(function(){
Rightscale.verticalUp($elt);
}, 5000);
//console.log(Rightscale.identifier)
},
horizontalWide: function($elt) {
Rightscale.identifier = 3
var scaleW = Rightscale.cntW / Rightscale.svgW;
$elt.css('transform', 'scaleX(' + scaleW + ')')
Rightscale.timerId = setTimeout(function(){
Rightscale.horizontalSmall($elt);
}, 5000);
//console.log(Rightscale.identifier)
},
horizontalSmall: function($elt) {
Rightscale.identifier = 4
$elt.css('transform', 'scaleX(1)')
Rightscale.timerId = setTimeout(function(){
Rightscale.horizontalWide($elt);
}, 5000);
//console.log(Rightscale.identifier)
}
}
Rightscale.init();#right {
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
}
.scale {
font-size: 0px;
width: 20%;
}
svg {
transition: transform 5000ms linear;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="right">
<div class="scale">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
style="enable-background:new 0 0 0 100;" xml:space="preserve">
<g>
<path d="M81.2,117.5c-6.6,8.8-17.5,13-34.8,13c-17.7,0-28.6-4.3-35.2-13.9c-5.3-7.5-7.7-17.1-8.5-32.4c-0.2-4.3-0.4-9.8-0.4-16.6
c0-18.4,0.9-27.3,3.6-37.3C7.2,25.5,9.2,21,11.7,17C18.5,6.7,29,2,45.6,2c17.3,0,27.9,3.8,34.6,12.4c7.9,10.2,10.4,22,10.4,51.2
C90.6,93.4,87.9,108.1,81.2,117.5z M57.4,66.1l-0.2-16.4C56.9,24,56.1,21.9,46.9,21.9c-6.2,0-9.4,3.4-10.2,10.9
c-0.6,7.5-0.9,21.8-0.9,38.4c0,13,0.2,25,0.8,29.4c0.8,6.2,4.1,9.4,10,9.4c5.6,0,9-3.2,9.8-9.6c0.6-4.5,1.1-19.2,1.1-31.1V66.1z"/>
</g>
</svg>
</div>
</div>关于javascript - 单击时在两个函数循环之间切换，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49285931/