0

ユーザーが特定のアイコンをクリックするたびに、特定の 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を縮小したいだけです。ここで何をすればよいですか?

4

3 に答える 3

3

この要素の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;
});
于 2013-06-16T08:16:06.280 に答える
0

これでうまくいきそうです……。

たぶん、より大きな値を試してみてください。それは、要素の大きさに大きく依存します...

私の例では、幅が 500px で、450 縮小しています...

例はこちら

 $("i.legend-icon").click(function(){
$("#chart").animate({width: '-=450px',},"slow");
});
于 2013-06-16T08:21:21.773 に答える
0

収縮後のコンテナの状態をより具体的にするようにしてください。animat はさらに多くのコントロールを持つことができます:

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

詳細については、animate doc をご覧ください。

于 2013-06-16T08:23:31.980 に答える