Question

我正在学习使用Javascript和jquery，并且有一个相当愚蠢的初学者问题。我的优点是要创建四个同时移动的对象，但是第一个应该改变大小onclick，第三个应该在mouseenter上改变颜色这是我到目前为止所看不到的并且似乎无法继续点。我非常感谢你的帮助。

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您必须定位div，以便使用left属性或使用marginLeft代替left，并且未正确关闭html {{1标签，

试试这个jsFiddle

<强> HTML

div

<强> JS

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

<强> CSS

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

Jquery移动物体

2 个答案: