Показать сообщение отдельно
  #1 (permalink)  
Старый 12.03.2015, 16:51
Аспирант
Отправить личное сообщение для piraids Посмотреть профиль Найти все сообщения от piraids
 
Регистрация: 20.08.2013
Сообщений: 88

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, 12.03.2015 в 17:25.
Ответить с цитированием