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");
    });

但它s not working. It完全没有将 div 显示为 -50px .. 但我只是想让 div 缩小我应该在这里做什么？

Answer 1

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

您可以在 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;
});

Answer 2

try to be more specific on what you want the container to be after shrinking. animat can have much more controls:

  ... animate(
                        {
                            "left":<positionafter shrinking>,
                            "width":["toggle", "swing"]
                        },
                        {
                            "duration": 0,
                            "step": function( now, fx ){},
                            "complete": function(){

have a look at the animate doc on the details.

Answer 3

这似乎工作得很好......

也许只是尝试一个更大的值，这真的取决于你的元素有多大......

在我的示例中，它的宽度为 500 像素，我将其缩小 450...

示例在这里

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