Отключить срабатывание обработчика, когда анимация еще не закончена

Рейтинг: 0Ответов: 1Опубликовано: 15.04.2015

Делаю карусель

$(document).ready(function() {
  var i = 0;
  $('li').css('position', 'absolute');
  $('li').each(function() {
    $(this).css('left', $(this).index() * 100 + 'px');
  });

  $(".left").mousedown(function() {
    var cnt = $('li').length;
    $('li').each(function() {
      var pos = $(this).position();
      isDown = 0;
      if (pos.left >= 0)
        $(this).css('left', pos.left - 100 + 'px');
      else
        $(this).css('left', (cnt - 2) * 100 + 'px');
      console.log($(this).index() + ' ' + pos.left);
    });
  });

  $(".right").mousedown(function() {
    var cnt = $('li').length;
    $('li').each(function() {
      var pos = $(this).position();
      if (pos.left >= ((cnt - 1) * 100))
        $(this).css('left', 0 + 'px');
      else
        $(this).css('left', pos.left + 100 + 'px');
      console.log(pos.left);
    });
  });
});
* {
  box-sizing: border-box
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
  height: 100px;
  width: 800px;
  position: relative;
  font-size: 0;
  overflow: hidden;
  background: red;
}
ul:after {
  content: " ";
  visibility: hidden;
  display: block;
  height: 0;
  clear: both;
}
li {
  border: 1px solid #000;
  width: 100px;
  height: 100px;
  font-size: 16px;
  transition: 0.3s;
  float: left;
  background: red;
  font-size: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
  <li>11</li>
  <li>12</li>
  <li>13</li>
  <li>14</li>
  <li>15</li>
</ul>
<button class="left">left</button>
<button class="right">right</button>

http://jsfiddle.net/IlyaSurmay/o272s6oe/

Как отключить срабатывание обработчика, если анимация еще не закончена?

javascript jquery
Источник: Stack Overflow на русском

Ответы

▲ 2

Вам нужно завести массив с позициями каждого из элементов и изменять значения там, а не вычислять их каждый раз, например вот так:

$(document).ready(function () {
    var i=0;
    var values = new Array();
    var i=0;
    $('li').css('position','absolute');
    $('li').each(function(index){
        $(this).css('left', index*100 + 'px');
        values[index] = index*100;
        console.log(values[index]);
    });
    
    $(".left").mousedown(function () {
        var cnt = $('li').length;
        $('li').each(function(index){
            var left = values[index];
            
            if(left >= 0)
                left = left - 100;
            else
                left = (cnt - 2) * 100;
          
            values[index] = left;
            
            $(this).css("left", left + 'px');
        });
    });    
    
        $(".right").mousedown(function () {
        var cnt = $('li').length;
        
        $('li').each(function(index){
            var left = values[index];
            
            if(left >= ((cnt-1)*100))
                left = 0;
            else
                left = left + 100;

            values[index] = left;
            
            $(this).css("left", left + 'px');
        });
    }); 
});
*{box-sizing:border-box}
ul{list-style:none;margin:0;padding:0;height:100px;width:800px;position:relative;font-size:0;overflow:hidden;background:red;}
ul:after{content: " ";visibility: hidden;display: block;height:0;clear:both;}
li{border:1px solid #000;width:100px;height:100px;font-size:16px;transition:0.3s;float:left;background:red;font-size:50px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>11</li>
    <li>12</li>
    <li>13</li>
    <li>14</li>
    <li>15</li>
</ul>
<button class="left">left</button>
<button class="right">right</button>

только тогда быстрый сдвиг вправо прикольный получается :)