0

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!

James Barracca
  • 465
  • 2
  • 6
  • 14

2 Answers2

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);
});
Popnoodles
  • 28,090
  • 2
  • 45
  • 53
  • Thanks. This definitely works too. Less complex, which is good. I wish I could click the check box for both answers, since both technically worked! – James Barracca Jan 12 '13 at 22:58
  • A lot of things technically work! Eventually you find the shortest possible possible route. – Popnoodles Jan 12 '13 at 23:16
0

My strategy would be to add a data attribute to #dude after the animation, so that we can test the value of that attribute before running the animation. Here's my new code:

$(function () {
   $("#chalkboardweare").click(function () {
      $("#boxweare").animate({width: 'toggle'}, 500);
      if ( !($("#dude").data("played")) )
         $("#dude").sprite({fps: 50, no_of_frames: 50, play_frames: 50}).data("played",true);
   });
});
Austin Mullins
  • 7,307
  • 2
  • 33
  • 48
  • Thanks. This enables the "#boxweare" div to be toggled after every click, but now the "#dude" div is not animating at all. – James Barracca Jan 12 '13 at 22:28
  • wait, i'm wrong. sorry. I had renamed the "#dude" div only for the sake of this post. when i pasted your code into my editor, I forgot to change the div back to it's original name. thanks again! – James Barracca Jan 12 '13 at 22:45