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吗？

您可以查看我的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;
});

Answer 2

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

也许只是尝试更大的价值，这实际上取决于你的元素有多大......

在我的例子中，它的宽度为500px，我将它缩小了450 ......

Example Here

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

Answer 3

尝试更具体地说明收缩后容器的内容。动画可以有更多的控制：

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

查看有关详细信息的动画文档。

缩小div上的div - Jquery 1.9

3 个答案: