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

Fiddle

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()

DEMO

Answer 3

如果你只想使用animate方法，那么你可以设置一个Flag来告诉你是否隐藏或显示为

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

.animate（）方法第二次使用

3 个答案: