javascript - Jquery移动对象

Question

我现在正在学习使用 Javascript 和 jquery，并且有一个相当愚蠢的初学者问题。我练习的目的是创建四个同时移动的对象，但第一个应该在单击时更改大小，第三个应该在鼠标输入时更改颜色，这是我到目前为止所拥有的，似乎无法从此继续观点。我非常感谢对此的帮助。

$(document).ready(function() {
  $("button").click(function() {
    $("div").animate({
      left: '250px'
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<button>Animate</button>

<br><br><br>
<div class="first">
  <div style="background:#98bf21;height:100px;width:100px;"></div>
  <br><br><br>
  <div class="second">
    <div style="background:#d80000;height:100px;width:100px;"></div>
    <br><br><br>
    <div class="third">
      <div style="background:#038ef0;height:100px;width:100px;"></div>
      <br><br><br>
      <div class="fourth">
        <div style="background:#ffc50d;height:100px;width:100px;"></div>

Answer 1

您必须定位您的 div 以便可以使用 left 属性或使用 marginLeft 而不是 left ，并且您没有正确关闭您的 html div 标签，

试试这个 jsFiddle

HTML

<button>Animate</button>
<br>
<br>
<br>
<div class="first">
<div style="background:#98bf21;height:100px;width:100px;">
</div></div>
<br>
<br>
<br>
<div class="second">
<div style="background:#d80000;height:100px;width:100px;">
</div></div>
<br>
<br>
<br>
<div class="third">
<div style="background:#038ef0;height:100px;width:100px;">
</div></div>
<br>
<br>
<br>
<div class="fourth">
<div style="background:#ffc50d;height:100px;width:100px;">
</div></div>

JS

$(document).ready(function(){
    $("button").click(function(){
        $("div").animate({left: 250}, 1000);
    });
    // change border radius to make it a circle
    $("div.first").click(function(){
        $("div.first div").animate({borderRadius:"50%"});
    });
    // on mouse ove change background color and return at mouse out
    // but you can do this css hover simpler
    $("div.third").mouseover(function(){
        $("div.third div").css("background-color","black");
    }).mouseout(function() {
        $("div.third div").css("background-color","#038ef0");
       });
});

CSS

div{position:relative}