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>

Answer 1

虽然这个问题看起来很棒，但我很乐意提供帮助，但它缺少一些信息和格式来帮助您解答！

尝试解决这些问题：

使用工具栏中图像按钮旁边的有用代码按钮很好地格式化代码！
提供你的HTML，记住我看不到你的屏幕（不幸的是）所以如果我有你的HTML就会非常有用，所以我知道你想要移动什么以及点击什么！
在你问之前谷歌搜索！虽然我很乐意帮助我，但我觉得Google可以很快得到答案！

例如（只需30秒的谷歌搜索）我发现： https://stackoverflow.com/a/2532509/5868718 给Nick Craver +1！：）

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>

我不是jQuery Guru，但我认为你可以把上面的函数链接到另一个听这样点击的函数！

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

看看!!看起来很不错！我希望有所帮助！

欢迎来到社区：）

当我点击其他html元素时，如何使图像对角移动？

1 个答案: