jquery panel slide Out and In + 스크롤

Question

안녕하세요, 저는 위치 정보를 표시하기 위해 Google지도 위에 div를 밀어 넣어야하는 다음 코드를 가지고 있습니다.

그러나 전혀 슬라이드하지 않는 것 같습니다. 테스트 버튼을 누르기 만하면 슬라이드 패널을 클릭하면 밀어 넣기/빼기 대신에 자리에 튀어 나오는 것처럼 보입니다. 또한 해당 div에 대한 스크롤도 엉망으로 만든 것 같습니다. 오버플로 -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가 피들에로드되어 있지 않습니다. 코드는 내가

position: absolute; 
... 
right: 0; 

에 .slider에 CSS를 변경하고 left 속성을 꺼내서, 잘 작동합니다. 그게 네가 원하는지 모르겠다. 하지만 HERE은 실용적인 데모입니다. 건배. 애니메이션에 대한

Answer 2

은 추가 할 필요가 적용하는 position:relative 또는

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

.slider{ 
    position:relative; 
}