切换宽度调整动画 - jquery

Question

我有<div id="test"></div>和<a id="trigger"></a>.Div的宽度为300px.我希望div在用户单击触发器时将其宽度调整为100px,并且当用户再次单击触发器时想要将其大小调整为先前的大小.我怎样才能使用jquery？

提前致谢...:)

blasteralfred

Answer 1

为单击分配变量1,为unlick分配0,然后使用.click函数,如下所示:

$(document).ready(function(){
  TriggerClick = 0;

  $("a#trigger").click(function(){
    if(TriggerClick==0){
         TriggerClick=1;
         $("div#test").animate({width:'100px'}, 500);
    }else{
         TriggerClick=0;
         $("div#test").animate({width:'300px'}, 500);
    };
  });
});

更新 - 更好的答案

我提出这个建议了一会儿; 但相信有更优雅和务实的方法来解决这个问题.你可以使用CSS转换并让jquery简单地添加/删除一个启动转换的类:

工作小提琴:https: //jsfiddle.net/2q0odoLk/

CSS:

#test {
  height: 300px;
  width: 300px;
  background-color: red;

  /* setup the css transitions */
  -webkit-transition: width 1s;
  -moz-transition: width 1s;
  transition: width 1s;
}

#test.small {
   width: 100px;
}

jQuery的:

$("a#trigger").on('click', function(){
    $("div#test").toggleClass('small');
});