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

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


  });

  $(".third").mouseover(function() {
    $(this).animate().css({
      backgroundColor: '#000000'
    });
  })


  $(".fourth").mouseout(function() {

    $(this).animate({
      width: 300
    })
  });


});

div {
  position: relative;
  width: 100px;
  height: 100px;
  margin-bottom: 20px;
}

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


<button>Animate</button>

<div class="first" style="background:#98bf21;"></div>

<div class="second" style="background:#d80000;"></div>

<div class="third" style="background:#038ef0;"></div>

<div class="fourth" style="background:#ffc50d;"></div>

Answer 2

您必须定位您的 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}

Jquery 移动物体

Jquery moving objects

javascript

jquery

jquery-animate