动画效果不如预期工作。

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>

- Manoj Dhiman

---

你想要实现什么目标？ - Tushar

请检查我的jsfiddle链接。点击按钮后，右侧div会显示在左侧div下方。我想要的是它应该向左和向右滑动。也就是说，从左到右滑动。 - Manoj Dhiman

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 */
}

- Nilesh Mahajan

---

连续点击时动画效果不佳。 - Tushar

Answer 2

首先，将左右两个div放在同一个div中，并在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);
    }
  });
});

这里有演示

您可以自由操作以获得所需的精确动作

- Mohamed-Yousef

Answer 3

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

// Caching
var $tagsLeft = $('#tags-left'),
    $tagDiv = $('#tag-div');
var tagLeftWidth,
    tagDivWidth;

$("#show-tag").on('click', function () {
    var $this = $(this);
    $this.prop('disabled', true).addClass('disabled'); // Disable the button
    tagLeftWidth = $tagDiv.width() ? '90%' : '45%';
    tagDivWidth = $tagDiv.width() ? '0%' : '45%';

    $tagDiv.animate({
        'width': tagDivWidth
    }, function() {
        $this.prop('disabled', false).removeClass('disabled'); // Enabling button
    });

    $tagsLeft.animate({
        'width': tagLeftWidth
    });
});

示例: https://jsfiddle.net/tusharj/uzar3j4q/11/

- Tushar

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

- juntapao