Question

I have an object, that, when you click on it, two things happen… a div with some text appears, and a character plays a short sprite animation. However, I want the sprite animation to be completely removed after it plays for the first time. I want the div text box to continue to be toggled by click.

This is what I have:

$(function () {
$("#chalkboardweare").click(function () {
    $("#boxweare").animate({width: 'toggle'}, 500);
            $("#dude").sprite({fps: 50, no_of_frames: 50, play_frames: 50});
});
});

At this point, every time you click on the “#chalkboardweare” object, the “#boxweare” and “#dude” are toggled…

I want the “#boxweare” div to be toggled every click.

I want the “#dude” div to be toggled only after the very first click.

Can someone help me out with this?

Thanks!

Answer 1

Use .one() – it means “do this only once”. After it’s clicked (in this case) the binding is removed, but your .on() binds will persist.

$("#chalkboardweare").one('click', function () {
    $("#dude").sprite({fps: 50, no_of_frames: 50, play_frames: 50});
}).on('click', function () {
    $("#boxweare").animate({width: 'toggle'}, 500);
});