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 ： //css-tricks.com/examples/Circulate/

你必须打电话

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

在元素上。 因此，如果您想对鼠标悬停/鼠标悬停做一些事情，代码将如下所示：

$("#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");
})

我在这里看到的唯一一个问题是，circular（“ Stop”）仅停止了动画的循环-动画将继续进行，直到完成当前的迭代为止，但随后将不会开始另一个动画。 那可能不是您想要的。