jquery - .animate() 方法第二次使用

Question

我想为侧面板设置动画。第一个动作完成，我点击一个按钮，侧面板折叠或缩小height。现在我希望侧面板width在再次单击按钮时重新获得它，这是我无法完成的。

这是我做的东西：

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

请尝试.animate仅使用相同的方法来回答，而不是像 slideToggle 等任何其他方法......在此先感谢。

Answer 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');
});

小提琴

Answer 2

检查面板宽度并相应地执行动画

$('.collaps').click(function(){
    if ($('#adminmenuback').width() != 30) // if it's not the minimal width then collapse
    {
        $('#adminmenuback').animate({width:"30px"});
    }
    else // if it is minimal then enlarge
    {
        $('#adminmenuback').animate({width: "300px"}); //change the width to what you need
    }
});

编辑：如果您使用填充，您可能需要.outerWidth()代替或.width()

演示

Answer 3

如果你只想使用 animate 方法，那么你可以设置一个标志，它会告诉你是隐藏还是显示suck as

$(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;
   }     
  });
});