CODEWITHSUNDEEP
jqueryhtmlcss
boomzboombam
boomzboombam

Reputation: 21

Jquery Explode Effect not working

I am a relative beginner to coding and have worked my way through a handful of courses on CodeAcademy.com

For fun I was trying to type code in Notepad utilizing HTML CSS and JQUERY that had an image of Mario that would have him move on the screen and then if you clicked his image he would explode with the explode effect. I can't seem to get it to function properly. The movement function works fine, but the explode doesn't seem to work.

I've tried various ways of putting in either "div" or "img" in the effects but it doesn't seem to work.

Could someone help me with what I'm doing wrong. I was thinking that the click isn't working but I do not know why. Also when I click off of the window and back to the window it won't let me move it anymore. It only lets me move it when I first load the page.

Below is my trouble section

$(document).ready(function() {
  $("img").click(function() {
    $("img").hide("explode", {pieces: 16}, 2000 );
  });
});

Here is the full code.

$(document).ready(function() {

  $(document).keydown(function(key) {

    switch (parseInt(key.which, 10)) {

      // Left arrow key pressed
      case 37:
        $('img').animate({
          left: "-=10px"
        }, 'fast');
        break;

      // Up Arrow Pressed
      case 38:
        $('img').animate({
          top: "-=10px"
        }, "fast");
        // Put our code here
        break;

      // Right Arrow Pressed
      case 39:
        $('img').animate({
          left: "+=10px"
        }, "fast");
        // Put our code here
        break;

      // Down Arrow Pressed
      case 40:
        // Put our code here
        $('img').animate({
          top: "+=10px"
        }, "fast");
        break;
    }
  });

});

$(document).ready(function() {
  $("img").click(function() {
    $("img").hide("explode", {
      pieces: 16
    }, 2000);
  });
});
div {
  height: 100px;
  width: 100px;
  border-radius: 200%;
}

img {
  position: relative;
  left: 0;
  top: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class='container a span'>
  <img src="https://upload.wikimedia.org/wikipedia/en/9/99/MarioSMBW.png">
</div>

Thanks so much!!

Upvotes: 2

Views: 418

Answers (1)

Tim Jenkins
Tim Jenkins

Reputation: 111

It looks like explode is actually not part of jquery, but from jquery ui. you'll have to add this code just under the jquery include:

<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"> </script>

Upvotes: 3

Related Questions