Question

尝试但未通过时，使用animate（）方法将图片向右移动250px。

我可以使用按钮执行此操作，但在将图像用作“按钮”时却会感到挣扎。

HTML

<div class="runner-animation"> 
    <h1> Click to see how fast the runner moves! </h1>
    <img src="Images/runner-clip-art.png" id="runner">
</div>

的jQuery

$(document).ready(function(){
$("#runner").click(function(){
    $("#runner").animate({right: '250px'});
});

任何帮助将不胜感激。

干杯

Answer 1

只要你定位了图像，纯粹的jQuery就可以了。

那就是说，你错过了代码中的右括号和括号......

编辑：你想知道如何在动画运行后重置动画。下面的代码有所改变：首先，动画包含一些额外的参数 - 时间和动画完成时运行的函数。在这个函数中，我隐藏了h1标签，并显示了一个重置按钮。重置按钮的代码只是将图像恢复到原始CSS位置，隐藏重置按钮并重新显示H1标签。

希望这有帮助！

＆＃13;

$(document).ready(function() {
  $("#runner").click(function() {
    $("#runner").animate({
      left: '250px'
    }, 200, function(){ 
      // When animation is complete, display the reset button.
      $('h1').hide();
      $('.reset').show()
    });
  });
  
  $(".reset").on("click", function(){
    $('h1').show();
    $(this).hide();
    $("#runner").css('left', '0px');
  });
});

＆＃13;

#runner {
  position: relative;
}

.reset {
 display:none;
 }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="runner-animation">
  <h1> Click to see how fast the runner moves! </h1>
  <p><button class="reset">Reset my runner!</button></p>
  <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRi-GA_UEaos9P4H5dWe31rt-00En4KB6sE3RydFX91WGXKMpz1" id="runner">
</div>

＆＃13;

单击图像以向右移动（移动）

1 个答案: