Перемещение изображения в html при нажатии кнопки с помощью jquery

-2

Я просто хочу, чтобы сделать перемещение изображения слева направо от страницы одним нажатием кнопки. Я использую приведенный ниже код, но он не работает. Я новичок в JQuery.Перемещение изображения в html при нажатии кнопки с помощью 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>

источник

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

Это происходит потому, что вы не имея готовый объявление функции DOM в script тега. Включите это:

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

Перемещение изображения в html при нажатии кнопки с помощью jquery

ответ

Смежные вопросы