Question

I have:

<img id="leftBubble" class="bubbles" src="left.png" />
<img id="rightBubble" class="bubbles" src="right.png" />

And a hover event like so:

$(".bubbles").each(function(){
    $(this).hover(function() { 
        pause($(this));
    }, function() {
        play(4000, $(this));
    });
});

My pause() function does not seem to be working

function pause(pauseMe) {
    if (pauseMe == $("#leftBubble")) {
        clearTimeout(timer1);                        //this is never reached
    } else if (pauseMe == $("#rightBubble")) {
        clearTimeout(timer2);                        //nor this
    }
}

Any idea to make the hover event pass $this as the parameter for the pause function?

Answer 1

Each time you call $, it returns a different result set object, even if the result contents are the same. The check you have to do is:

if (pauseMe.is("#leftBubble")) {