javascript - Jquery - 单击时缩小 DIV

Question

我正在使用下面的代码来为 div 设置动画。

$("i.legend-icon").click(function(){
    $(".scatterchartcolumn").animate({width: '-=100px'});
});

1. 我想要 div，只能缩小。但它完全隐藏了 100px 的 div。我不希望这种情况发生。

2. 当我再次点击同一个 div 时，我希望动画停止并且 div 回到默认位置。

这是代码.. 我想停止它并使 .scatterchartcolumn 在我再次单击 i.legend-icon 时具有相同的宽度，因为它是默认的。我还希望动画一直运行到我再次单击 i.legend-icon 为止。目前它会在一秒钟左右停止动画。

HTML

<div class="scatterchartcolumn">
    <div id="scattercharty_axis"></div>
    <div id="scatterchart"></div>
    <div id="scatterchartx_axis"></div>
</div>

CSS

.scatterchartcolumn {
    float: left;
    display: inline;
    margin-left: 25px;
    width: 780px;
    height: 300px;
}

Answer 1

下面的代码将帮助你做到这一点

$(".legend-icon").click(function () {
       if ($(this).attr('id') == "icon1") {
          $(".scatterchartcolumn").animate({ width: '-=100px' }, 2500);
          $(this).attr('id', 'icon2');
       }
       else {
          $(".scatterchartcolumn").animate({ width: '+=100px' }, 2500);
          $(this).attr('id', 'icon1');
       }
   });

这是工作 fiddle样本

看看这个jqfaq.com站点，它有更多 jquery 相关的常见问题解答。这可能对您有所帮助。