이상한 jQuery UI 슬라이더 동작

Question

간단한 한 페이지 웹 사이트를 개발 중이며 jQuery UI Slider을 통합하려고합니다. 그것을 통합 할 웹 사이트는 Website입니다.

슬라이더에 약간의 문제가있는 것 같습니다. 왼쪽 및 오른쪽 화살표 (또는 왼쪽 및 오른쪽 키보드 키)를 사용하여 탐색 할 때 슬라이더를 자세히 보면 뒤로 이동하면 마지막 단계 전에 최소 범위가 몇 픽셀의 핸들로 점프한다는 것을 알 수 있습니다 배경 이미지).

또한 마우스 커서를 사용하여 핸들을 움직일 때 핸들에 연결된 animate 속성이 작동하지 않습니다. 핸들이 0 위치에 있고 마지막 위치를 클릭하면 일반적으로 마지막 위치이지만 점프합니다.

누군가 이러한 버그를 수정하는 방법을 알려주시겠습니까? 첫 번째 문제에 대한 CSS 작업을 시도했지만 그 때문에 것 같지 않습니다.

Answer 1

1. 는 "최소 범위는 핸들 앞서 점프"- 내가 여기에 버그 감소했습니다 http://jsfiddle.net/jefferyto/Gd5dn/

   이것은 jQuery.animate()에서 bug이 아닌 픽셀 값을 애니메이션입니다; 슬라이더는 백분율을 사용합니다. 애니메이션을 적용하기 전에 jQuery는 요소의 시작 값 (픽셀 단위)을 최종 값의 단위로 변환하고이 비 px 시작 값을 요소 (jQuery 1.7.2 (unminified)의 8601 ~ 8605 행)에 할당합니다.

   0 %와 같은 작은 최종 값에 대한 계산에 결함이 있으므로 범위의 시작 너비가 있어야하는 것보다 큽니다.

   픽스와 함께 pull request을 열었습니다. jQuery의 현재 안정 버전에도 동일한 수정 사항을 적용 할 수 있습니다.

   업데이트 : 현재 (jQuery를 1.7.2에 대한)이 버그를 해결 플러그인을 찾을 수 있습니다에

   // Start jQuery.animate() fix 
   

   을에서 http://jsfiddle.net/jefferyto/zbkQX/

   복사 (상단)을 (검사 전 코드)

   // End jQuery.animate() fix 
   

   당신이 당신의 plugins.js에이 코드를 붙여 넣으면 그것은 작동합니다.

2. "슬라이더와 jPages 플러그인이 순환 콜백으로 연결되어 있기 때문에 마지막 위치에 애니메이션을 적용해야하지만 점프합니다."

   사용자가 슬라이더를 클릭하면 슬라이더가 slide 이벤트를 트리거 한 다음 핸들과 범위에 애니메이션을 적용합니다. slide 이벤트 핸들러는 jPages를 호출하여 새 페이지로 변경합니다. jPages는 현재 페이지 번호를 다시 Slider에 전달하는 할당 된 콜백 함수를 호출합니다. 슬라이더는 값을 설정하고 핸들/범위를 애니메이션으로 만들기 시작합니다.

   slide 이벤트 후, 슬라이더 (실제로 애니메이션이 제 2 시간), 핸들과 범위를 애니메이션으로 되돌아 간다. 슬라이더는 애니메이션을 적용하기 전에 요소에 .stop(1, 1)을 호출하여 첫 ​​번째 애니메이션을 중지하고 즉시 최종 값으로 바로 이동합니다. (두 번째 .animate()는 요소가 올바른 위치에 이미 있기 때문에 아무것도하지 않습니다.)

   이

   나는 jPages 논리를 추가 제안 새로운 페이지와 슬라이더를 호출하는 콜백 (내가 만든 감지 :-)이 있기를 바랍니다) 트리거는 원래 Slider에서 가져온 것이 아닐 경우에만 사용됩니다.

   는 업데이트 : jPages를 들어

   slide: function(event, ui) { 
       if (!self.paging) { 
        self.paging = true; 
        $(self.shop_navigation_class).jPages(ui.value); 
        self.paging = false; 
       } 
   } 
   

   :

   슬라이더를 들어

   : 나는 당신이 모두 콜백을 업데이트해야합니다 생각

   callback: function(pages) { 
       var data = { 
        current_page: pages.current, 
        total_pages: pages.count 
       } 
       self.set_local_storage_data(self.data_key, JSON.stringify(data)); 
       if (!self.paging) { 
        self.paging = true; 
        $(self.shop_slider_class).slider("value", pages.current); 
        self.paging = false; 
       } 
   } 
   

   은 알려 주시기 바랍니다이 작동하는지 확인 너를 위해서.

Answer 2

아마도 가장 간단한 대답은 일 뿐이며 jQueryUI의 슬라이더을 사용하지 않을 수 있습니다.

코드를 살펴보면 JS 및 CSS에서 자신의 외관과 핵심 동작을 직접 복제 할 수있을만큼 쉽게 유능하고 자신이 원하는 방식으로 정확하게 작동하는 것처럼 보입니다.