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(...

但是它不起作用..

有什么想法吗？提亚

Answer 1

阅读本文：https://css-tricks.com/examples/Circulate/

你得打电话给我

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

我在这里看到的唯一问题是，循环(“Stop”)只停止动画的循环-动画将继续，直到它的当前迭代完成，但不会启动另一个循环。这可能不是你想要的。