Question

<div class="col-md-3" id="button1">
    <p id="text1">Button1</p>
</div>
<div class="col-md-3" id="animate1"></div>

#animate1 {
    margin-left:1%;
    margin-right:1%;
    width:23%;
    background-color:blue;
}

#button1 {
    background-color:white;
    text-align:center;
    margin-left:1%;
    margin-right:1%;
    width:23%;
    margin-top:0%;
    margin-bottom:0%;
    padding-top:1.5%;
    padding-bottom:1.5%;
}

#button1:hover {
    background-color:red;
}

$("#button1").click(function () {
    $("#animate1").animate({
        "width": "70%",
            "left": "+=50px"
    }, "slow");
});

我想用Jquery做一些动画。我想要实现的是当点击button1时，animate1将移动并改变宽度。然而它根本行不通......

任何可能的解决方案？非常感谢。

Answer 1

您要设置动画的<div>元素，没有高度。动画有效，你只是无法看到它。设置任何高度，你都很好。

Answer 2

$(function() {

  $("#button1").click(function() {
    $("#animate1").animate({
      "width": "70%",
      "left": "+=50px"
    }, "slow");
  });
})

#animate1 {
  margin-left: 1%;
  margin-right: 1%;
  width: 23%;
  background-color: blue;
  height:2%;
}
#button1 {
  background-color: white;
  text-align: center;
  margin-left: 1%;
  margin-right: 1%;
  width: 23%;
  margin-top: 0%;
  margin-bottom: 0%;
  padding-top: 1.5%;
  padding-bottom: 1.5%;
}
#button1:hover {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="col-md-3" id="button1">
  <p id="text1">Button1</p>
</div>
<div class="col-md-3" id="animate1">test</div>

Answer 3

设置动画对象的高度。例如

$("#button1").click(function() {
    $("#animate1").animate({
     "height": "10px",              
     "width": "70%",
     "left": "+=50px"
    },"slow");
});

应该这样做

Jquery：无法动画起作用

3 个答案: