Question

嘿所有我有以下代码，应该在谷歌地图上滑动div来显示位置信息。

然而，它似乎根本不想滑动。一旦它点击测试按钮点击滑动面板它似乎弹出到位而不是滑入/滑出。它似乎也搞砸了我对这个div的滚动。我无法再使用overflow-x滚动条滚动信息。

它应该从角落的右侧滑入，如图所示：

enter image description here

$(document).ready(function () {
    load();

    $('#click').click(function() {
        $('.slider').toggle("slide", {
            direction: "left",
            distance: -180
        }, 500);
    });
});

function load() {
    map = new google.maps.Map(document.getElementById("map"), {
        center: new google.maps.LatLng(40, -100),
        zoom: 4,
        mapTypeId: 'roadmap',
        mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}
    });

    infoWindow = new google.maps.InfoWindow();
    locationSelect = document.getElementById("locationSelect");

    locationSelect.onchange = function() {
        var markerNum = locationSelect.options[locationSelect.selectedIndex].value;

        if (markerNum != "none"){
            google.maps.event.trigger(markers[markerNum], 'click');
        }
    };
}

以及它的HTML：

<div>
    <div align="center" id="zipBox">
            Zip code: <input type="text" id="addressInput" size="10" style="border: solid 1px #000000; width: 40px;" maxlength="5" />
            Radius: <select id="radiusSelect" style="border: solid 1px #000000;">
                <option value="5" selected="selected">05 miles</option>
                <option value="10">10 miles</option>
                <option value="15">15 miles</option>
                <option value="20">20 miles</option>
                <option value="25">25 miles</option>
                <option value="30">30 miles</option>
                <option value="40">40 miles</option>
                <option value="50">50 miles</option>
                <option value="60">60 miles</option>
                <option value="70">70 miles</option>
            </select>

            <input type="button" id="searchButton" value="Search" style="border: solid 1px #000000;" />
    </div>
    <div>
        <select id="locationSelect" style="width:100%;visibility:hidden"></select>
          <div align="right" class="slider">
              <p align="center">
                  <div dir='ltr' align="center">
                      <strong>Event Location:</strong><br>
                      This is the event name here!<br>
                      1510 E Woodlands St
                  </div>
                  <div align="center" style="border-bottom: 1px solid #CCC;">
                      <strong>Event Dates/Times:</strong><br>
                      11/25/2014 @ 10:00AM
                  </div>
              </p>
              <p align="center">
                  <div dir='ltr' align="center">
                      <strong>Event Location:</strong><br>
                      This is the event name here!<br>
                      1510 E Woodlands St
                  </div>
                  <div align="center" style="border-bottom: 1px solid #CCC;">
                      <strong>Event Dates/Times:</strong><br>
                      11/25/2014 @ 10:00AM
                  </div>
              </p>
              <p align="center">
                  <div dir='ltr' align="center">
                      <strong>Event Location:</strong><br>
                      This is the event name here!<br>
                      1510 E Woodlands St
                  </div>
                  <div align="center" style="border-bottom: 1px solid #CCC;">
                      <strong>Event Dates/Times:</strong><br>
                      11/25/2014 @ 10:00AM
                  </div>
              </p>
              <p align="center">
                  <div dir='ltr' align="center">
                      <strong>Event Location:</strong><br>
                      This is the event name here!<br>
                      1510 E Woodlands St
                  </div>
                  <div align="center" style="border-bottom: 1px solid #CCC;">
                      <strong>Event Dates/Times:</strong><br>
                      11/25/2014 @ 10:00AM
                  </div>
              </p>
              <p align="center">
                  <div dir='ltr' align="center">
                      <strong>Event Location:</strong><br>
                      This is the event name here!<br>
                      1510 E Woodlands St
                  </div>
                  <div align="center" style="border-bottom: 1px solid #CCC;">
                      <strong>Event Dates/Times:</strong><br>
                      11/25/2014 @ 10:00AM
                  </div>
              </p>
              <p align="center">
                  <div dir='ltr' align="center">
                      <strong>Event Location:</strong><br>
                      This is the event name here!<br>
                      1510 E Woodlands St
                  </div>
                  <div align="center" style="border-bottom: 1px solid #CCC;">
                      <strong>Event Dates/Times:</strong><br>
                      11/25/2014 @ 10:00AM
                  </div>
              </p>
          </div>
    </div>
    <div id="mapAndInfo">
        <div id="map" style="width: 800px; height: 600px"></div>
    </div>
        <div id="click" style="background: #000; color: #fff; width: 300px; height: 30px;">click to slide panel
    </div>
</div>

现在是CSS：

body {
    overflow-x: hidden;
    margin:0px;
    padding:0px;
}

#zipBox {
    position: absolute;
    margin-top: 598px;
    width: 798px;
    z-index: 10000;
    border: 1px solid #CCC;
    background: rgb(255,255,255);
    background: transparent\9;
    background: rgba(255,255,255,0.3);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4cffffff,endColorstr=#4cffffff);
}

.slider {
    position: absolute;
    z-index: 10002;
    width: 170px;
    height: 590px;
    left: 320px;
    border: solid 1px #CCC;
    padding: 5px;
    right: -280px;
    overflow: scroll;
    overflow-x: hidden;
    background: rgb(255,255,255);
    background: transparent\9;
    background: rgba(255,255,255,0.8);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ccffffff,endColorstr=#ccffffff);
    display: none;
}

查看JSFiddle的内容！

Answer 1

好吧，你的小提琴中没有加载jquery-ui。您的代码运行正常，我将.slider上的CSS更改为

position: absolute;
...
right: 0;

并取出left属性。我不知道这是不是你想要的。但HERE是一个有效的演示。欢呼声。

Answer 2

要让动画生效，您需要添加position:relative或position:absolute

http://jsfiddle.net/36yfz1nb/2/

.slider{
    position:relative;
}

jquery面板滑出和In +滚动

2 个答案: