javascript - 动画没有按预期工作

Question

我正在尝试在单击按钮时在两个 div 上制作动画。这是我创建的演示 js fiddle .我想要的是

当用户单击按钮时，右侧的 div 将向右滑动(它将隐藏)。左侧div的宽度变为100%。

第二次，当用户点击右边的 div 时，将从右向左滑动可见，左边的 div 的宽度为 50%

我正在尝试这段代码。 我的 html 是

  <div class="col-md-12">
   <div id="tags-left" class="col-md-6">
      div left 
   </div>
</div>
<div id="tag-div" class="col-md-6">
   div right
</div>
</div>
<div class="col-md-12">
<div class="btn-main">
   <input id="show-tag" type="button" class="save-btn" value="Show Tag">
   <input id="preview" type="button" class="save-btn" value="Preview">
</div>

我的js是

$("#show-tag").click(function (e) 
 {
     $( "#tag-div" ).toggle( "slow", function(element) {
        //e.preventDefault();
    if ($('#tag-div').is(":visible") ) {
       $('#tags-left').css('width','50%');
    } else {
      $('#tags-left').css('width','100%');
    }
  });
});

$("#show-tag").click(function (e) 
 {
     $( "#tag-div" ).toggle( "slow", function(element) {
        //e.preventDefault();
    if ($('#tag-div').is(":visible") ) {
       $('#tags-left').css('width','50%');
    } else {
      $('#tags-left').css('width','100%');
    }
  });
});

.col-md-6 {
  width:45%;
    float:left;
    background:red;
    height:200px;
    margin:3px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="col-md-12">
    <div id="tags-left" class="col-md-6">
        
        div left 
        
</div>
    </div>
    <div id="tag-div" class="col-md-6">
        div right
    </div>
    
   
</div>
 <div class="col-md-12">
<div class="btn-main">
<input id="show-tag" type="button" class="save-btn" value="Show Tag">
<input id="preview" type="button" class="save-btn" value="Preview">
</div>

Answer 1

这是一个简单的解决方案，无需编写太多代码，请参阅 fiddle :https://jsfiddle.net/uzar3j4q/7/

JS

var action = 1;

$("#show-tag").click(function () {
     if ( action == 1 ) {
         $("#tag-div" ).animate({'width':'0%',});
         $('#tags-left').animate({'width':'90%'});
         action = 2;
     } else {
         $("#tag-div" ).animate({'width':'45%',});
         $('#tags-left').animate({'width':'45%'});
         action = 1;
     }
});

CSS

.col-md-6 {
  width:45%;
    float:left;
    background:red;
    height:200px;
    margin:3px;
    overflow:hidden; /* This property is added just to hide overflowing content */
}