顺利滑动div？ Div幻灯片很好，但内容（内部div）滞后

时间：2018-04-12 18:53:44

标签： jquery slider

我是javascript的新手，我已经阅读了很多关于让div滑动顺畅的线索，但是当我的div很好地滑动时，该div的内部内容（包含在多个内部div中） ）加载速度不够快，所以当外部div完全滑出时，我会得到一个间隙。

GIF to describe what I'm talking about.

我不确定这是不是可修复的东西，但我想在这里问JS大师这件事。

我的JS：

  $('#display-map-info').click(function () {
      if ($('#map-functions').hasClass('visible')) {
          $('#map-functions').hide("slide", { direction: "right" }, 1000);
          $('#map-functions').removeClass('visible');
      }
      else {
          $('#map-functions').show("slide", { direction: "right" }, 1000);
          $('#map-functions').addClass('visible');
      }
  });

我的HTML：

<div id="map-toolbar">
        <button id="display-map-info"></button>
        <button id="classifyHab"></button>
        <button id="download-data"></button>
</div>
<div class="visible" id="map-functions">
        Select data year to display: <br />
        <select id="data-year"></select>
        <div id="legendDiv">
            <div id="legend"></div>
        </div>
        <div id="layersDiv">
            <h5>Layers</h5>
            <div id="toggleLayers">
                <label><input type="checkbox" id="patchesLyr" name="patchesLayer" value="patches" />Habitat Patches</label>
                <label><input type="checkbox" id="protectCoverLyr" name="pcLayer" value="pc">Protective Cover</label>
                <label><input type="checkbox" id="faLyr" name="faLayer" value="fa" checked>Focal & Reference Areas</label>
            </div>
        </div>
        <div id="rendererDiv">
            <h5>Renderers</h5>
            <label><input type="radio" id="qhStatusLyr" name="chosenLayer" value="qhStatus" checked>Quail Habitat Status</label>
            <label><input type="radio" id="coarseHabLyr" name="chosenLayer" value="coarse">Coarse-level Habitat Types</label>
            <label><input type="radio" id="fineHabLyr" name="chosenLayer" value="fine">Fine-level Habitat Types</label><br />
            <h5>Opacity</h5>
            <input type="radio" id="100-percent" name="setOpacity" value="100" checked>0%
            <input type="radio" id="75-percent" name="setOpacity" value="25">25%
            <input type="radio" id="50-percent" name="setOpacity" value="50">50%
            <input type="radio" id="25-percent" name="setOpacity" value="75">75%
        </div>
        <div id="HabClassifyGPService">
            State: <br />
            <select id="stateAbbrev" name="stateIDList" form="uploadForm">
                <option value="AL">Alabama</option>
                <option value="AR">Arkansas</option>
                <option value="DE">Delaware</option>
                <option value="GA">Georgia</option>
                <option value="FL">Florida</option>
                <option value="IL">Illinois</option>
                <option value="IN">Indiana</option>
                <option value="IA">Iowa</option>
                <option value="KS">Kansas</option>
                <option value="KY">Kentucky</option>
                <option value="LA">Lousiana</option>
                <option value="MD">Maryland</option>
                <option value="MS">Mississippi</option>
                <option value="MO">Missouri</option>
                <option value="NE">Nebraska</option>
                <option value="NJ">New Jersey</option>
                <option value="NC">North Carolina</option>
                <option value="OH">Ohio</option>
                <option value="OK">Oklahoma</option>
                <option value="PA">Pennsylvania</option>
                <option value="SC">South Carolina</option>
                <option value="TN">Tennessee</option>
                <option value="TX">Texas</option>
                <option value="VA">Virginia</option>
                <option value="WV">West Virginia</option>
            </select>
            <form id="uploadForm" method="post" enctype="multipart/form-data">
                <label class="custom-file-upload">
                    <input type="file" name="file" id="dataUpload" />
                    <span id="fileUploadLabel">File Upload</span>
                </label>
                <input type="button" value="Upload" id="upload" />
            </form>
        </div>
 </div>

CSS：

#map-toolbar button {
    margin-top: 1px;
    margin-bottom: 1px;
    height: 50px;
    width: 50px;
    border: none;
}

#map-functions {
  position: absolute;
  width: 250px;
  height: 93.90%;
  right: 50px;
  bottom: 0;
  padding: 10px;
  background-color: #fff;
  border: 5px solid orange;
}

1 个答案:

答案 0 :(得分：0)

您可以使用toggle和toggleClass代替if/else

这样的内容 

$('#display-map-info').click(function () {
    $('#map-functions').toggle("slide", { direction: "right" }, 1000).toggleClass('visible');
});
body{
  background : red;
}
#map-functions {
  position: absolute;
  width: 250px;
  right: 50px;
  top : 20px; /* change here */
  bottom: 20px; /* change here */
  padding: 10px;
  background-color: #fff;
  border: 5px solid orange;
  overflow-x: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/jquery-ui-git.js"></script>

<div id="map-toolbar">
  <button id="display-map-info">slide Div</button>
  <button id="classifyHab"></button>
  <button id="download-data"></button>
</div>
<div class="visible" id="map-functions">
  Select data year to display: <br />
  <select id="data-year"></select>
  <div id="legendDiv">
      <div id="legend"></div>
  </div>
  <div id="layersDiv">
      <h5>Layers</h5>
      <div id="toggleLayers">
          <label><input type="checkbox" id="patchesLyr" name="patchesLayer" value="patches" />Habitat Patches</label>
          <label><input type="checkbox" id="protectCoverLyr" name="pcLayer" value="pc">Protective Cover</label>
          <label><input type="checkbox" id="faLyr" name="faLayer" value="fa" checked>Focal & Reference Areas</label>
      </div>
  </div>
  <div id="rendererDiv">
      <h5>Renderers</h5>
      <label><input type="radio" id="qhStatusLyr" name="chosenLayer" value="qhStatus" checked>Quail Habitat Status</label>
      <label><input type="radio" id="coarseHabLyr" name="chosenLayer" value="coarse">Coarse-level Habitat Types</label>
      <label><input type="radio" id="fineHabLyr" name="chosenLayer" value="fine">Fine-level Habitat Types</label><br />
      <h5>Opacity</h5>
      <input type="radio" id="100-percent" name="setOpacity" value="100" checked>0%
      <input type="radio" id="75-percent" name="setOpacity" value="25">25%
      <input type="radio" id="50-percent" name="setOpacity" value="50">50%
      <input type="radio" id="25-percent" name="setOpacity" value="75">75%
  </div>
  <div id="HabClassifyGPService">
      State: <br />
      <select id="stateAbbrev" name="stateIDList" form="uploadForm">
          <option value="AL">Alabama</option>
          <option value="AR">Arkansas</option>
          <option value="DE">Delaware</option>
          <option value="GA">Georgia</option>
          <option value="FL">Florida</option>
          <option value="IL">Illinois</option>
          <option value="IN">Indiana</option>
          <option value="IA">Iowa</option>
          <option value="KS">Kansas</option>
          <option value="KY">Kentucky</option>
          <option value="LA">Lousiana</option>
          <option value="MD">Maryland</option>
          <option value="MS">Mississippi</option>
          <option value="MO">Missouri</option>
          <option value="NE">Nebraska</option>
          <option value="NJ">New Jersey</option>
          <option value="NC">North Carolina</option>
          <option value="OH">Ohio</option>
          <option value="OK">Oklahoma</option>
          <option value="PA">Pennsylvania</option>
          <option value="SC">South Carolina</option>
          <option value="TN">Tennessee</option>
          <option value="TX">Texas</option>
          <option value="VA">Virginia</option>
          <option value="WV">West Virginia</option>
      </select>
      <form id="uploadForm" method="post" enctype="multipart/form-data">
          <label class="custom-file-upload">
              <input type="file" name="file" id="dataUpload" />
              <span id="fileUploadLabel">File Upload</span>
          </label>
          <input type="button" value="Upload" id="upload" />
      </form>
  </div>
</div>

  

注意：如果div在可见后影响其他样式..然后检查css文件中的类.visible样式

相关问题
最新问题