onmouseover / onmouseout横幅

Question

我正试图用“.circulate”制作弧形滚动横幅（好像很少有图标在球体上滚动）。

我成功地做到了但现在我想做一个onmouseover / onmouseout事件，当鼠标悬停在它上面时停止动画

html:

<div id="sphere-area" >
<img src="a.png" alt="ball" id="orange-ball" />
alt="" />
</div>



Js:

function startBallOne() {
    $("#orange-ball").circulate({
        speed: 4000,
        height: 100,
        width: -880,
        sizeAdjustment: 40,
        loop: true,
        zIndexValues: [1, 1, 3, 3]
    });
}

我试过像

这样的东西

$("#orange-ball").mouseout(circulate(...

但它不起作用..

有什么想法吗？ TIA

Answer 1

阅读本文：https://dev.office.com/docs/add-ins/outlook/get-attachments-of-an-outlook-item

你必须致电

$("#anything").circulate("Stop");

关于元素。 因此，如果您想在mouseover / mouseout上执行某些操作，代码将如下所示：

$("#orange-ball").mouseover(function(){
    $(this).circulate({
        speed: 4000,
        height: 100,
        width: -880,
        sizeAdjustment: 40,
        loop: true,
        zIndexValues: [1, 1, 3, 3]
    });
});

$("#orange-ball").mouseout(function(){
    $(this).circulate("Stop");
})

我在这里看到的唯一问题是，圆形（“停止”）仅停止动画的循环 - 动画将继续直到当前迭代完成，但随后将不再启动另一个。那可能不是你想要的。