javascript - 单击时缩小 div - Jquery 1.9

Question

我希望每次用户单击特定图标时缩小特定的 div(完整的数据应该是可见的)。这里我有类，legend-icon。所以我希望另一个 ID，例如 #Chart 在用户点击

时缩小

HTML

<div id="id1">
  <ul class="nav pull-right">
    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">
        <i class="legend-icon"></i> <b class="caret"></b>
      </a>
      <div id="legend_container" class="dropdown-menu">
        <div id="smoother" title="Smoothing"></div><div id="legend"></div>
      </div>
    </li>
  </ul>
</div>

<div id="in">
   <div id="chart">

    //my data

   </div>
</div>

我试过

  $("i.legend-icon").click(function(){
    $("#chart").animate({width: '-=50px',},"slow");
    });

但是它不工作。它完全没有将div显示到-50px..但我只是想让div缩小我应该怎么做？

Answer 1

你能把这个元素的 css 展示给吗？

你可以查看我的demo on jsfiddle ，它按您预期的那样工作。但这不是你的 html 和 css，但它应该是一样的。

<a href="#" class="click-me">click me</a>

<div class="animate-me"></div>


.animate-me {
    width: 300px;
    height: 100px;
    background-color: aqua;
}


$(".click-me").click(function(){
    $(".animate-me").animate({width: '-=50px',},"slow");
    return false;
});