使用jquery點擊按鈕在html中移動圖像

-2

我只是想創建一個圖像從一個按鈕點擊頁面的左側移動到右側。我正在使用下面的一段代碼，但它不起作用。我是JQuery的新手。使用jquery點擊按鈕在html中移動圖像

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

來源

2014-01-08 user3173987

有數以千計的這個問題重複的。 – Manoj

您需要在document-ready處理

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

來源

2014-01-08 15:57:48 Satpal

綁定無助於移動圖像 – user3173987

@ user3173987，即使在添加文檔就緒處理程序之後，請參閱http://jsfiddle.net/f5xJ6/ – Satpal

那是因爲你沒有在script標籤的DOM ready函數聲明綁定事件。包括：

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

這是運行jQuery代碼所必需的。沒有這個，jQuery代碼將不會執行。

來源

2014-01-08 15:58:33

正如其他人所說，你已經錯過了文件準備好，還我稍微收拾了你的代碼，因此它可能會更有意義，您：

http://jsfiddle.net/PH3ff/

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

來源

2014-01-08 16:08:38

代碼未執行 – user3173987

查看該示例，請記住包含您的jQuery庫中，並檢查控制檯是否有任何錯誤。這可能對您有所幫助：https://developers.google.com/chrome-developer-tools/docs/console –

試試這個：

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

來源

2014-01-08 16:18:18 Pelo8888

圖像不滑動 – user3173987

嘗試使用文檔準備 – Pelo8888

使用jquery點擊按鈕在html中移動圖像

回答

相關問題