Question

我是编码的相对初学者，并且已经在CodeAcademy.com上学习了一些课程

为了好玩，我试图在记事本中使用HTML CSS和JQUERY键入代码，其中有一个Mario图像可以让他在屏幕上移动，然后如果你点击他的图像，他会爆炸，爆炸效果。我似乎无法让它正常运作。运动功能很好，但爆炸似乎不起作用。

我已经尝试过多种方式来放入＆＃34; div＆＃34;或＆＃34; img＆＃34;在效果，但似乎没有效果。

有人可以帮我解决我做错的事。我当时认为点击不起作用，但我不知道为什么。此外，当我点击窗户并返回窗口时，它不再让我移动它。它只允许我在第一次加载页面时移动它。

以下是我的问题部分

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

这是完整的代码。

＆＃13;

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

＆＃13;

div {
  height: 100px;
  width: 100px;
  border-radius: 200%;
}

img {
  position: relative;
  left: 0;
  top: 0;
}

＆＃13;

<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>

＆＃13;

非常感谢!!

Answer 1

看起来爆炸实际上不是jquery的一部分，而是来自jquery ui。你必须在jquery include下添加这段代码：

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

Jquery爆炸效果不起作用

1 个答案: