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

这是一个简单的解决方案，没有做太多编码，请看小提琴：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 */
}

Answer 2

首先..将左右div放在同一个div和css中

<强> CSS

.col-md-12 {
    white-space: nowrap;
    overflow: hidden;
    height:200px;
}

你可以在js中使用animate（）方法

<强> JS

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

DEMO HERE

你可以随意玩弄你需要的确切行动

Answer 3

优化@Nilesh Mahajan的答案。连续点击按钮时发现问题。

FileReader

演示：https://jsfiddle.net/tusharj/uzar3j4q/11/

Answer 4

试试这个html：

<div id="tag-left" class="col-md-6">div left</div>
<div id="tag-right" class="col-md-6">div right</div>

和这个javascript：

$("#show-tag").click(function (e)  {
    if($("#tag-right").width() == 0) {
        $("#tag-left").animate({
            width: '0'
        });
        $("#tag-right").animate({
         width: '90%'
        });
    } else {
        $("#tag-left").animate({
            width: '90%'
        });
        $("#tag-right").animate({
            width: '0'
        });
    }
});

jsfiddle

动画未按预期工作

4 个答案: