jScrollPane анимация без очереди
Использую такой плагин:
https://github.com/vitch/jScrollPane По клику на стрелку вызывается функция в которой запускается скрол по горизонтали на x пикселей. Вкратце это выглядит вот так:
function Scroll() {
var element = $('#test').jScrollPane({
showArrows:false,
maintainPosition:true,
horizontalGutter:0,
verticalGutter:0
}),
api = element.data('jsp'),
apiScrollWidth = 100;
api.scrollByX(apiScrollWidth, true);
}
$('.arrow').click(function(e){
e.preventDefault();
Scroll();
});
вот по клику на стрелку смещение происходит на 100px вправо если быстро кликать на стрелку то сбивается смещение - вместо 100 сдвигается на меньшее, как этого избежать? я понимаю что необходимо вызывать функцию по завершению текущей анимации, вот только как узнать что анимация закончилась? callback функций в плагине я не нашел, может слепой.. пробывал дописывать вот так:
var element = $('#test').jScrollPane({
showArrows:false,
maintainPosition:true,
horizontalGutter:0,
verticalGutter:0
}).bind('jsp-scroll-x', scrollHandler);
function scrollHandler(event, destLeft, animateScroll, isAtLeft, isAtRight)
{
console.log(event);
}
так срабатывает при скроллинге, но показывает не то что нужно набросал пример - если быстро щелкать то сбивается, как решить? также пример этотже здесь http://learn.javascript.ru/play/YI3mV нашел animate в api - api.animate - как бы вытянуть оттуда callback?
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
#test{ overflow: hidden; }
.red { background-color: red; width: 30px; height: 30px; }
.green { background-color: green; width: 30px; height: 30px; }
table { border-collapse: collapse; border: 0; }
.arrow { position: absolute; top: 5%; border: 1px solid; padding: 0 5px; cursor:pointer; }
.arrow.right { right: 0; }
.arrow.left { left: 0; }
.wrap { position: relative; width: 129px; padding: 0 35px; }
.jspHorizontalBar { display: none; }
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://jscrollpane.kelvinluck.com/script/jquery.jscrollpane.js"></script>
<link rel="stylesheet" href="http://jscrollpane.kelvinluck.com/style/jquery.jscrollpane.css" type="text/css" media="screen">
<script src="http://jscrollpane.kelvinluck.com/script/jquery.mousewheel.js"></script>
<script>
$(document).ready(function(){
var element = $('#test').jScrollPane({ showArrows:false,maintainPosition:true, horizontalGutter:0, verticalGutter:0 });
function Scroll(element, side) {
side = '' || side;
var api = element.data('jsp'),
mark = '';
if (side == 'left') {
mark = '-';
}
api.scrollByX(mark+'32', true);
}
$('.arrow').click(function(){
var side = '';
if ($(this).is('.left')) {
side = 'left';
}
Scroll(element, side);
});
});
</script>
</head>
<body>
<!-- вот такой получился пример -->
<div class="wrap">
<div class="arrow left">◄</div>
<div id="test">
<table>
<tr>
<td><div class="red"></div></td>
<td><div class="green"></div></td>
<td><div class="red"></div></td>
<td><div class="green"></div></td>
<td><div class="red"></div></td>
<td><div class="green"></div></td>
<td><div class="red"></div></td>
<td><div class="green"></div></td>
<td><div class="red"></div></td>
<td><div class="red"></div></td>
<td><div class="green"></div></td>
<td><div class="red"></div></td>
<td><div class="green"></div></td>
<td><div class="red"></div></td>
<td><div class="green"></div></td>
<td><div class="red"></div></td>
<td><div class="green"></div></td>
<td><div class="red"></div></td>
</tr>
</table>
</div>
<div class="arrow right">►</div>
</div>
</body>
</html>
|
топ
|
piraids,
зачем вам куча плагинов для обыкновенного слайдера ?
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
#test{ overflow: hidden; }
.red { background-color: red; width: 30px; height: 30px; }
.green { background-color: green; width: 30px; height: 30px; }
table { border-collapse: collapse; border: 0; position: relative; top: 0;}
.arrow { position: absolute; top: 5%; border: 1px solid; padding: 0 5px; cursor:pointer; }
.arrow.right { right: 0; }
.arrow.left { left: 0; }
.wrap { position: relative; width: 129px; padding: 0 35px; }
.jspHorizontalBar { display: none; }
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
var element = $('#test'), table = $('table', element),left = 0, min = element.width() - table.width() ;
$('.arrow').click(function(){
left += $(this).is('.left') ? 32 : -32;
left < min && (left = min);
left > 0 && (left = 0);
table.stop(true,true).animate({left : left},800)
});
});
</script>
</head>
<body>
<!-- вот такой получился пример -->
<div class="wrap">
<div class="arrow left">◄</div>
<div id="test">
<table>
<tr>
<td><div class="red"></div></td>
<td><div class="green"></div></td>
<td><div class="red"></div></td>
<td><div class="green"></div></td>
<td><div class="red"></div></td>
<td><div class="green"></div></td>
<td><div class="red"></div></td>
<td><div class="green"></div></td>
<td><div class="red"></div></td>
<td><div class="red"></div></td>
<td><div class="green"></div></td>
<td><div class="red"></div></td>
<td><div class="green"></div></td>
<td><div class="red"></div></td>
<td><div class="green"></div></td>
<td><div class="red"></div></td>
<td><div class="green"></div></td>
<td><div class="red"></div></td>
</tr>
</table>
</div>
<div class="arrow right">►</div>
</div>
</body>
</html>
|
рони,
согласен) и без плагина все работает) но все равно интересно как можно разрешить проблему с плагином, кроме как не использовать его или использовать другой?) никак?) |
| Часовой пояс GMT +3, время: 12:53. |