jQuery面板滑出和滑入+滾動

Question

嘿，我有以下代碼，應該在google地圖頂部滑動div以顯示位置信息。

但是，它似乎根本不想滑動。 按下測試按鈕並單擊以滑動面板后，它似乎只是彈出到位，而不是滑入/滑出。 它似乎也弄亂了該div的滾動條。 我無法再使用overflow-x滾動條滾動瀏覽信息。

如圖所示，它應該從角落的右側滑入：

$(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 .slider為

position: absolute;
...
right: 0;

並拿走了left財產。 不知道那是不是你想要的 但是， 這里是一個工作示例。 干杯。

Answer 2

為了使動畫生效，您需要添加position:relative或position:absolute

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

.slider{
    position:relative;
}