jquery面板滑出和在+滾動

Question

嘿，我有以下代碼，應該滑動谷歌地圖頂部的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加載你的小提琴。你的代碼工作正常，我改變了CSS上.slider到

position: absolute; 
... 
right: 0; 

，並拿出了left財產。我不知道這是你想要的。但是HERE是一個工作演示。乾杯。

Answer 2

對於生命的帶你需要添加效果position:relative或position:absolute

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

.slider{ 
    position:relative; 
}