Question

新年快乐！

我有一个div，我想通过点击按钮滑入和滑出视图。我希望它的相邻div能够与它无缝地滑动以占据它的位置。此时相邻的div不会移动，直到滑动动画结束，然后它以一个笨重的动作跳入隐藏的div的位置。

如何让它们一起滑动并隐藏一个而不是另一个？

现在我正在使用jQuery UI，但也许我应该使用.animate（）？

您将最好地了解我在这里要做的事情：http://www.redearthtrail.com/img/sampleapi5.php

JS

var state = false;

$("#toggle-slide-button").click(function () {
    if (!state) {
          $('#map-legend').hide("slide", { direction: "right"}, 1000);
        $('#toggle-slide-button img').attr('src', '/img/map-arrow-open.png');

          state = true;
        }
    else {
          $('#map-legend').show("slide", { direction: "right"}, 1000);
          $('#toggle-slide-button img').attr('src', '/img/map-arrow-close.png');

          state = false;
        }
});

CSS

#map-legend-control {
    width: 50px;
    height: 100%;
    margin: 0;
    padding: 0 20px;
    float: right;
    background-color: #000;
    position: relative;
  }
  #map-legend {
    width: 400px;
    height: 100%;
    margin: 0;
    padding: 0;
    float: right;
    position: relative;
    background-color: #CCC;
    -webkit-box-shadow:inset 1px 0 5px 0 rgba(000,000,00,1);
    box-shadow:inset 1px 0 5px 0 rgba(000,000,00,1);
  }
  #map-legend p {
    padding-left: 25px;
  }

HTML

<div id="map-legend">
  <p><strong>Trail Name:</strong></p>
  <p id="trail-id">Please select a trail.</p>

  <p><strong>Trail Difficulty:</strong></p>
  <p id="trail-difficulty">Please select a trail.</p>

  <p><strong>Trail Latitude:</strong></p>
  <p id="trail-lat">Please select a trail.</p>

  <p><strong>Trail Longitude:</strong></p>
  <p id="trail-long">Please select a trail.</p>

  <p><strong>Trail Thumbnail:</strong></p>
  <p id="trail-thumb">Please select a trail.</p>

  <div style="position:absolute;bottom:0;">
    <p><strong>Trail Sponsor:</strong></p>
    <p id="trail-sponsor">Please select a trail.</p>
  </div>
</div>

<div id="map-legend-control">
  <a href="#" id="toggle-slide-button"><img src="http://www.redearthtrail.com/img/map-arrow-close.png" width="50px" height="50px" /></a>
</div>

感谢您的任何见解！

Answer 1

我肯定认为你在正确的轨道上思考toggle是要走的路。检查这个小提琴我的快速和肮脏：

http://jsfiddle.net/GUjPA/13/

我换了一行

$('#map-legend').animate({width: "toggle"}, 1000);

VS

$('#map-legend').hide("slide", { direction: "right"}, 1000);

  #map-legend p {
    padding-left: 25px;
    width: 400px;
  }

完整代码：

var state = false;

$("#toggle-slide-button").click(function () {
  if (!state) {
    $('#map-legend').animate({width: "toggle"}, 1000);
    $('#toggle-slide-button img').attr('src', 'http://www.redearthtrail.com/img/map-arrow-open.png');

      state = true;
    }
  else {
      $('#map-legend').animate({width: "toggle"}, 1000);
      $('#toggle-slide-button img').attr('src', 'http://www.redearthtrail.com/img/map-arrow-close.png');

      state = false;
    }
});

Answer 2

您可以使用div为控件设置动画。将div推到右边＆amp;隐藏overflow-x

<强> CSS

body{overflow-x: hidden}

<强> Jquery的

var state = false;

$("#toggle-slide-button").click(function () {
    if (!state) {
        $('#map-legend').animate({left: 410}, 1000);
        $('#map-legend-control').animate({left: 410}, 1000);
        $('#toggle-slide-button img').attr('src', 'http://www.redearthtrail.com/img/map-arrow-open.png');

          state = true;
        }
    else {
          $('#map-legend').animate({left: 0}, 1000);
        $('#map-legend-control').animate({left: 0}, 1000);
          $('#toggle-slide-button img').attr('src', 'http://www.redearthtrail.com/img/map-arrow-close.png');

          state = false;
        }
});

演示http://jsfiddle.net/GUjPA/6/

Answer 3

查看您的问题，您使用按钮获得异常跳转的原因是因为显示/隐藏方法。元素被隐藏或显示。它不可能两者兼而有之。起初这有点难以理解。带内容的div实际上即使在向右移动时也是如此。因此，当您单击按钮以隐藏面板时，它会被动画移动，但技术上仍占用最初添加的空间。反过来另一种方式。我会在按钮和面板周围添加一个容器。然后，当选择向右或向左滑动时，只需根据div的像素大小设置容器的动画以向左/向右滑动。它永远不会被隐藏，只是移出屏幕。

使用jQuery UI隐藏div。如何将其相邻的div与其一起滑动以取代它？

3 个答案: