12월, 2016의 게시물 표시

[jQuery] bxslider 멈춤현상

1번과 2번을 같이 처리 지금은 업데이트된 버전이 나온걸로 알고 있음 1. bxslider 는 슬라이드 애니메이션 동작할때 css translate3d 와 jquery animate를 사용한다. ios webview 에서는 translate3d 를 지원하므로 css 로 애니메이션이 동작을 하는데, 애니메이션이 끝나면 transitionend 이벤트가 실행이 되고 slider.working = false; 가 되면서 애니메이션이 끝난다. 그런데 스크롤을 함과 동시에 이미지를 넘기면 transitionend 가 실행이 안되고 slider.working 은 계속 ture상태로 남게되면서 bxslider는 더이상 동작하지 않는다. 이 문제를 해결하기 위해서 transitionend 가 발생하지 않으면 slider.working = false; 를 실행시키기 위해 소스를 수정해보았다. jquery.bxslider.js 를 열어서 var setPositionProperty = function(value, type, duration, params){ 이 부분을 찾은다음 // set the property value el.css(slider.animProp, propValue); css 속성을 세팅하는 부분 아래에다가 // ios에서 스크롤하면서 작동하면 transitionend 이벤트가 안먹혀서 추가함 by starkey var dummy = setTimeout(function(){     slider.working = false; }, duration+1); // --> 를 추가하고, 정상적으로 transitionend 가 발생했을대 clearTimeout 을 해준다. el.bind('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd', function(){    clearTimeout(dummy); // transitionend