Question

我有一段代码，单击一个按钮即可折叠一个div并扩展另一个。扩大的div部分仅迭代一次，然后不再进行任何操作，而可折叠的div继续这样做。

在代码中，我声明了一个名为divSize的变量来获取.widenDiv的大小，原因是因为屏幕大小不同，像素宽度也不同，所以我想保持UI尽可能标准。

当我第二次单击折叠按钮时，div将缩小到其原始大小。动画可以按预期运行，但是只能运行一次。

$(document).ready(function() {
  var divSize = $('.widenDiv').width();
  $('.widenDiv').width() == divSize;

  $('#divAnimateBtn').click(function() {
    $('#collapseDiv').slideToggle("normal");

    if ($('.widenDiv').width() == divSize) {
      $('.widenDiv').animate({
        width: "90%"
      });
    } else {
      $('.widenDiv').animate({
        width: divSize
      });
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<div class="body-content col-sm-12 col-lg-12" style=" margin-top: -10px; height: 100%; background-color: white;">
  <div class="col-lg-2 col-sm-2 col-xs-2 clearfix left-column-container" style="background-color: white; float: left; max-height: 100vh; ">
    <div class="left-column" id="Test" style="background-color: white;">
      <button id="divAnimateBtn" type="button" class="btn btn-info"></button>
      <div class="collapse in" id="collapseDiv">
        <p>filler</p>
      </div>
    </div>
  </div>
  <div class="col-lg-9 col-sm-9 col-xs-9 widenDiv" style="background-color: white; text-align: center;">
    <div class="right-column-bottom col-lg-12" style="border: 1px solid black; padding-top: 5px; margin-top: 5px;">
      <p>filler</p>
    </div>
  </div>
</div>

更新的代码解决了我的问题：

我在按钮上添加了onClick（）函数。

 <button id="divAnimateBtn" type ="button" class="btn btn-info" onclick="extendDiv()" style="float: left;"><<</button>

使用香草js和几行jQuery代码，我实现了预期的UI动画。

var exBtn = document.createElement("BUTTON"); //button is declared so I can slide out again.
var colBtn = document.getElementById("divAnimateBtn");
function extendDiv() {
            document.getElementById("widenDiv").style.width = "96%";
            $('#collapseDiv').slideToggle("slow");
            colBtn.style.display= "none";
            exBtn.innerHTML = ">>";
            document.getElementById("right-column-container").prepend(exBtn);
            exBtn.style = "border: 2px solid #0066CC; float: left; background-color: #fff; border-radius: 5px; color: #0066CC; font-size: 14px;";
            exBtn.onclick = shrinkDiv; //new function for the replacement button


        }

        function shrinkDiv() {
            exBtn.remove();
            colBtn.style.display = "inline";
             $('#collapseDiv').slideToggle("slow");
            document.getElementById("widenDiv").style.width = "" //<- sets CSS back to initial value;      
        }

设置CSS中扩大div的动画速度

#widenDiv{
    transition: 1s;
}

animate（）仅运行一次

0 个答案: