Question

我正在尝试使用jquery动画来调整图像的大小。动画正在运行，但是动画完成后，图像将恢复为原始大小。这是我的js和html

$(document).ready(function() {
  $("[id=hBtn]").click(function() {
    $("[id=valueProp]").animate({
      width: '-=350px'
    });
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="valueProp" style="left: 8%; top: 2px; position: absolute; opacity:0.95">
  <img src="slide1.png" width="1152" height="648">
</div>
<button class="btn" id="hBtn">&#8646;</button>
</div>

Answer 1

您必须为<img>而不是容器<div>设置动画……因为动画结束后，即使容器处于动画状态，图像也只会溢出回到其定义的width较小。

关于还原动画，请使用.data()作为标志来了解图像状态并决定。

我还添加了600ms的延迟，忽略时默认为400ms。另一个参数是设置“标志”的回调。

$(document).ready(function() {
  $("[id=hBtn]").click(function() {
    if($("[id=valueProp] img").data("reduced")!=true){
      $("[id=valueProp] img").animate({
        width: '-=350px'
      },600,function(){
        $("[id=valueProp] img").data("reduced",true);
      });
    }else{
      $("[id=valueProp] img").animate({
        width: '+=350px'
      },600,function(){
        $("[id=valueProp] img").data("reduced",false);
      });
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="valueProp" style="left: 8%; top: 2px; position: absolute; opacity:0.95">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/52/Liliumbulbiferumflowertop.jpg/220px-Liliumbulbiferumflowertop.jpg" width="1152" height="648">
</div>
<button class="btn" id="hBtn">&#8646;</button>
</div>

我按原样离开了选择器...但是您可以使用#valueProp代替[id=valueProp]。

Answer 2

尝试将 id 放入 img 吗？

<div style="left: 8%; top: 2px; position: absolute; opacity:0.95">
  <img src="slide1.png" id="valueProp" width="1152" height="648">
</div>
<button class="btn" id="hBtn">&#8646;</button>
</div>

jQuery Animate-恢复为原始大小

2 个答案: