onmouseover / onmouseout 横幅答案

【问题标题】：onmouseover / onmouseout banneronmouseover / onmouseout 横幅
【发布时间】：2016-12-16 15:08:48
【问题描述】：

我正在尝试使用 ".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

【问题讨论】：

标签： javascript onmouseover

【解决方案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");
})

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

【讨论】：