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

Question

新年快乐！

我有一个 div，我想通过单击按钮滑入和滑出视图。我希望它相邻的 div 可以无缝地沿着它滑动来代替它。目前相邻的div不会移动，直到滑动动画完成，然后它以一个笨拙的动作跳到隐藏的div的位置。

我怎样才能让它们一起滑动并隐藏一个而不是另一个？

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

你会在这里得到我想要做的最好的想法：http://www.redearthtrail.com/img/sampleapi5.php

Here's a jsFiddle 也演示一下：

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);

对

$('#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 向右推并隐藏溢出-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的像素大小向左/向右滑动。它永远不会被隐藏，只是移出屏幕。