onmouseover / onmouseout横幅

Question

i'm trying to make an arc scrolling banner ( as if few icons was scrolling around a sphere) with ".circulate" .

I successfully did it but now i would like to do an onmouseover/onmouseout event that stop the animation when the mouse is over it

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]
    });
}

I tried something like

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

but it doesnt work..

Any ideas please? TIA

Answer 1

From reading this: https://css-tricks.com/examples/Circulate/

You have to call

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

ON the element. So if you want to do something on mouseover/mouseout the code would look like this:

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

The only issue left I see here is, that circular("Stop") only stops the loop of the animation - the animation will continue until its current iteration is done, but then won't start another one. That might not be what you want.