jQuery Animate-恢复为原始大小 [英] jQuery Animate - reverts back to original size

问题描述

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

I'm trying to resize an image using jquery animate. The animation is working, but when the animation completes, the image reverts back to it's original size. Here's my 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>

推荐答案

您必须设置<img>的动画，而不是容器<div>的动画.因为一旦动画结束，图像就会简单地溢出回到其定义的位置width即使容器较小.

You have to animate the <img>, not the container <div>... Because once the animation is over, the image simply overflows back to it's defined width even if the container is smaller.

关于恢复动画，请使用 .data() 作为标志来了解什么是图像状态并做出决定.

And about reverting the animation, use .data() as a flag to know what is the image state and decide.

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

I also added a delay of 600ms, it is 400ms by default when omited. The other argument is the callback to set the "flag".

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

---

I left your selectors as is... But you can use #valueProp instead of [id=valueProp].

这篇关于jQuery Animate-恢复为原始大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！