Question

我只想创建一个图像，点击一个按钮从页面的左侧移动到右侧。我使用下面的代码，但它不起作用。我是JQuery的新手。

<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/
        jquery.min.js"> </script>
        <script src="//code.jquery.com/jquery-1.9.1.js"></script>
        <script src="//code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
        <script>
        $( "#but2" ).click(function() {
          $( "#vehi1" ).animate({ right:300px }, 500 );
        })
        </script>
    </head>
    <body>
        <div id="homel11">
            <button id="but2"style="top:200px;left:30px;position:fixed">click me</button>
        </div>
        <div id="vehi" ><img id="vehi1" style="left:0px;position:relative;
        top:540px;"src="vehi.png" />
        </div>
    </body>
</html>

Answer 1

您需要在document-ready处理程序

中绑定事件

$(document).ready(function () {
    $("#but2").click(function () {
        $("#vehi1").animate({
            right: 300px
        }, 500);
    });
});

Answer 2

试试这个：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Effect demo</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

    <style>
      .toggler { width: 500px; height: 200px; position: relative; }
      #but2 { padding: .5em 1em; text-decoration: none; }
      #effect { width: 240px; height: 135px; padding: 0.4em; position: relative; }
      #effect h3 { margin: 0; padding: 0.4em; text-align: center; }
      .ui-effects-transfer { border: 2px dotted gray; }

      .img-class{left:0px;position:relative;top:540px;}
      .btn-class-SO{top:200px;left:30px;position:fixed}
    </style>

    <script>
      $(function() {          
        $( "#but2" ).click(function() {
          $( "#vehi" ).effect("slide", 500);// run the effect
          //Here you can change the name of the effect you want
          return false;
        });
      });
    </script>
  </head>

  <body>
      <button id="but2"class="btn-class-SO">click me</button>
      <div id="vehi" ><img id="vehi1" class="img-class" src="vehi.png" />
      </div>
  </body>
</html>

Answer 3

这是因为您没有script标记中的DOM ready函数声明。包括这个：

$(document).ready(function () {
   // your code..it is correct!
}

这是运行jQuery代码所必需的。没有这个，jQuery代码将无法执行。

Answer 4

正如其他人所说，你已经错过了文件准备，我也略微整理了你的代码，所以对你来说更有意义：

http://jsfiddle.net/PH3ff/

JS

$(document).ready(function() {
    $("button[data-move]").click(function() {
        $('img.to-move').animate({left: '200px'}, 500);
    });
});

HTML

<img src="http://placehold.it/200x200" class="to-move" />
<button data-move>click me</button>

CSS

.to-move {
    position:absolute;
    left:0;
    top:30px;
}

使用jquery单击按钮在html中移动图像

4 个答案: