Question

我有3个svg对象。每个对象都有弧形。逻辑是每个弧对象具有最初禁用状态，开始启用第一个弧对象以及工具提示信息。这里请注意工具提示也在svg路径，文本和行中有一个了解更多按钮。第一个启用工具提示和隐藏，接下来两个弧也执行相同的操作。再次开始，依此类推。

我通过使用setInterval实现了这一点并且效果很好。现在我需要在阅读顶部提示信息时暂停循环。当我从工具提示中留下鼠标时。

我的代码

<g id="circleback1">     
<path class="neutral" d="M560.437"/><!-- Disable State arc-->
</g>
<g id="circleback2">    
<path class="neutral" d="M560.437"/>
</g>    
<g id="circleback3">
<path class="neutral" d="M560.437"/>
</g>
<g id="circle1">     
    <path class="highlight" d="M560.437"/><!-- Enable State arc-->
    <g class="tooltip"><!-- Tooltip of 1st arc-->
     <path >
     <path >
     <a xlink:href="http://mylink.com/" class="learnmore_btn"><text transform="matrix(1 0 0 1 136.0386 356.6826)" fill="#FFFFFF" >Learn More</text></a>
    </g>
</g>  
<g id="circle2">     
    <path class="highlight" d="M560.437"/><!-- Enable State arc-->
    <g class="tooltip"><!-- Tooltip of 2nd arc-->
     <path >
     <path >
     <a xlink:href="http://mylink.com/" class="learnmore_btn"><text transform="matrix(1 0 0 1 136.0386 356.6826)" fill="#FFFFFF" >Learn More</text></a>
    </g>
</g>
<g id="circle3">     
    <path class="highlight" d="M560.437"/><!-- Enable State arc-->
    <g class="tooltip"><!-- Tooltip of 3rd arc-->
     <path >
     <path >
     <a xlink:href="http://mylink.com/" class="learnmore_btn"><text transform="matrix(1 0 0 1 136.0386 356.6826)" fill="#FFFFFF" >Learn More</text></a>
    </g>
</g> 

<script>
$(document).ready(function(){
var index = 0;
var interval = null;
interval = window.setInterval(function(){animateLoop()},2000);

function animateLoop() {
      index = (index % 3) + 1;
      $('#circle' + index ).fadeIn(100);
      setTimeout(function() {
             $('#circle' + index ).fadeOut(200);
      }, 1900);
}

$('.learnmore_btn').hover(function(){
   window.clearInterval(interval);  
    },function(){
interval = window.setInterval(function(){animateLoop()},2000);
    }); 
});
</script>

我的Setinterval函数，Hover事件无效

0 个答案: