0

サイドパネルにアニメーションを付けたい。最初のアクションが実行され、ボタンをクリックすると、サイド パネルが縮小または縮小されheightます。widthここで、ボタンをもう一度クリックするとサイドパネルが元に戻るようにしたいのですが、これは実現できません。

これが私が作ったものです：

$(document).ready(function(){    
    $('.collaps').click(function(){    
        $('#adminmenuback').animate({width:"30px"});    
    }); 
});

.animateslideToggleなどの他の方法ではなく、同じ方法のみを使用して回答してください...よろしくお願いします。

4

3 に答える 3

1

を利用した回答を探していることは承知していますが$.animate、CSS3 トランジションの使用を検討したことはありますか? このアプローチは、JS の動作を維持し、スタイルを CSS に移動します。

.button {
    background-color: purple;
    transition: all 1s ease-out;
    width: 200px;
}

.expanded {
    background-color: orange;
    width: 400px;
}

<div class='button'>click me</div>

$('.button').click(function () {
    $(this).toggleClass('expanded');
});

フィドル

于 2013-09-03T05:52:47.870 に答える
0

animate メソッドのみを使用する場合は、suck を非表示にするか表示するかを示すフラグを設定できます。

$(document).ready(function(){
  var showFlag=1
  $('.collaps').click(function() {
   if(showFlag==1){
     $('#adminmenuback').animate({width:"30px"});
      showFlag=0;
   }else{
     $('#adminmenuback').animate({width:"-30px"});
     showFlag=1;
   }     
  });
});
于 2013-09-03T05:43:43.037 に答える