How can i make an image move diagonally when i click on an other html element?

Question

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-9">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script>
        $(function() {
            $(document).ready( function(){
                $("#btn3").hide(0);
                $("#carne").hide(0);
                $("#alfacePicada").hide(0);
                $("#EspetadasFrango").hide(0);
                $("#lasanha").hide(0);
                $("#gelado").hide(0);
            });
        });

        $(function() {
            $(document).ready(function(){
                $("#ovo").click(function(event){
                    $(this).animate({right: '+=200', bottom: '+=300'}, 1000);
                });
            });
        });
    </script>
</head>
<body>
    <div class="recortesredondos1">
        <div class="recortesredondos2">
            <h3>Regulamento 2073/2005 Módulo 1: Identificação de Critérios Aplicáveis</h3>
            <p id="menu">Menu</p><p id="recursos">Recursos</p>
            <p id="glossario">Glossário</p>
        </div>
        <h2><center>Estado de Alimentos Prontos Para Consumo<center></h2>
        <div id="botoes">
            <input type="submit" id="btn3" value="Submeter">
        </div>
        <img src="ovo2.gif" id="ovo" name="qq1" style="width:100px;height:100px; margin-left: 600px; margin-bottom:100px; margin-top: 100px z-index:4;">
        <img src="alfacepicada2.gif" id="alfacePicada" name="qq2" style="width:100px;height:100px; margin-left: 600px; margin-top:-65px; z-index:6;">
        <img src="carne2.gif" id="carne" name="qq3" style="width:100px;height:100px; margin-left: 600px; margin-top:-65px; z-index:7;">
        <img src="gelado2.gif" id="gelado" name="qq4" style="width:100px;height:100px; margin-left: 600px; margin-top:-65px; z-index:8;">
        <img src="galinha2.gif" id="EspetadasFrango" name="qq5" style="width:100px;height:100px; margin-left: 600px; margin-top:-65px; z-index:9;">
        <img src="lasanha2.gif" id="lasanha" name="qq6" style="width:100px;height:100px; margin-left: 600px; margin-top:-65px; z-index:10;">
        <div ="clique">
            <p id="linha1">---------------------------------</p>
        </div>

        <button type="submit" id="btn2" value="Submeter">RTE</button>
    </div>
</html>

score 1 · Answer 1 · edited May 23 '17 at 10:28

While this question looks great and I'd love to help, its lacking a bit of information and format to help you answer!

Try fixing these things:

Format your code nicely using the helpful code button next to the image button in the toolbar!
Provide your HTML, remember I can't see your screen (unfortunately) so it would be really helpful if I had your HTML so I know what your trying to move and what is being clicked!
Googling before you ask! Although I am happy to help I feel like Google could be a really quick way to get this answered!

For Example (just 30 seconds of googling) I found: https://stackoverflow.com/a/2532509/5868718 +1 to Nick Craver! :)

function myAnimate() {
$("#div").animate({left: '+=100', top: '+=100'}, 1000);
}

<div id="div" style="width: 100px; height: 100px; border: solid 1px red; position: relative;">Test</div>

I am no jQuery Guru, but I think you could probably link the above function up to another function which listens for a click like this!

$("button").click(function() {
  $("#div").animate({
    left: '+=150',
    top: '+=150'
  }, 1000);
})

button {
  position: relative;
  left: 150px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div" style="width: 100px; height: 100px; border: solid 1px red; position: relative;"> </div>

  <button type="button" id="myButton">
    Hi there!
  </button>

Check it out!! looks pretty good! I hope that helps!

Welcome to the community :)

How can i make an image move diagonally when i click on an other html element?

1 Answers1