Animating an image in an HTML document by clicking a button through jQuery

Question

Animating an image in an HTML document by clicking a button through jQuery

I am trying to figure out how to make an image move from the left to the right of a page when a button is clicked. I thought the code below would work, but unfortunately, it's not functioning as expected. I'm new to JQuery and could use some guidance.

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

jquery html css

Answer 1

Answer №1

It is important to attach an event within the document-ready handler

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

Answer 2

It is important to attach an event within the document-ready handler

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

Answer 3

Answer №2

Here is a suggestion to try:

<!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
          //Modify the effect name here if desired
          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 4

Here is a suggestion to try:

<!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
          //Modify the effect name here if desired
          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 5

Answer №3

One reason why your code may not be functioning is due to the absence of a DOM ready function declaration within the script tag. Make sure to include the following:

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

It is essential for running jQuery code as without it, the jQuery code will not run.

Answer 6

One reason why your code may not be functioning is due to the absence of a DOM ready function declaration within the script tag. Make sure to include the following:

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

It is essential for running jQuery code as without it, the jQuery code will not run.

Answer 7

Answer №4

Many have pointed out the importance of including document ready in your code. Here is a slightly modified version that may help you understand it better:

http://jsfiddle.net/PH3ff/

JavaScript

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

Answer 8

Many have pointed out the importance of including document ready in your code. Here is a slightly modified version that may help you understand it better:

http://jsfiddle.net/PH3ff/

JavaScript

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

Animating an image in an HTML document by clicking a button through jQuery

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Insert image using AJAX

Using jQuery to locate and substitute specific text

Are there any CSS attribute configurations that I am overlooking?

Steps to send an asynchronous AJAX request to the server-side within the JQuery validation plugin using the addMethod() function

Shine a spotlight on elements that match with jQuery using live() or on()

Using Javascript, you can create a function that can disable or enable a text link based on

jQuery sending a GET request but receiving null parameters in an MVC controller

Steps for updating the <option> selection in the third <select> menu when the second <select> menu changes, with the second menu being populated by altering the value of the first dropdown through jQuery AJAX

Sending an image via email using a highly limited HTML interface

The issue persists with json_encode as it fails to display the desired JSON output

A step-by-step guide on displaying MySQL data in a text field using AJAX

Display the contents in a textarea with modal, not as a string

Obtain the checkbox status using node.js

Tips for Deselecting a Table Cell in React

The transparent image is causing the menu item to be hidden underneath it because of z-index complications

Combining Data in Django using Ajax with JavaScript and Python Integration

From HTML to Python to Serial with WebIOPi

Utilize text wrapping to ensure a fixed maximum height for content display

Tips for inserting a button under a div when clicked

Tips on improving a function that verifies the existence of an image used as a CSS background to output a boolean value