queue()

Категории: Ядро > Доступ к объектам jQuery

Содержание:

queue( [ имя ] )
- .queue( [ имя ] )
queue( [ имя ], очередь )
- .queue( [ имя ], очередь )
- .queue( [ имя ], вызов )

.queue( [ имя ] )

Возвращает: Массив

Описание: Показывает очередь функций, которая должны выполняться на соответствующие элементы.

Аргументы

.queue( [ имя ] )

Добавлена в версию: 1.2

имя

Строка

Строка, содержащая имя очереди. По умолчанию fx, стандартная очередь эффектов.

Пример

Показывает длину очереди в данный момент.

    $("#show").click(function () {
      var n = $("div").queue("fx");
      $("span").text("Queue length is: " + n.length);
    });
    function runIt() {
      $("div").show("slow");
      $("div").animate({left:'+=200'},2000);
      $("div").slideToggle(1000);
      $("div").slideToggle("fast");
      $("div").animate({left:'-=200'},1500);
      $("div").hide("slow");
      $("div").show(1200);
      $("div").slideUp("normal", runIt);
    }
    runIt();

Результат выполнения кода выше:

Попробуйте сами

Пример - Полный код:

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" language="javascript">
  $(document).ready(function(){
    $("#show").click(function () {
      var n = $("div").queue("fx");
      $("span").text("Queue length is: " + n.length);
    });
    function runIt() {
      $("div").show("slow");
      $("div").animate({left:'+=200'},2000);
      $("div").slideToggle(1000);
      $("div").slideToggle("fast");
      $("div").animate({left:'-=200'},1500);
      $("div").hide("slow");
      $("div").show(1200);
      $("div").slideUp("normal", runIt);
    }
    runIt();
  });
  </script>
  <style>
  div { margin:3px; width:40px; height:40px;
        position:absolute; left:0px; top:30px;
        background:green; display:none; }
  div.newcolor { background:blue; }
  span { color:red; }
  </style>
</head>
<body>
  <button id="show">Show Length of Queue</button>
  <span></span>
  <div></div>
</body>
</html>

Попробуйте сами

.queue( [ имя ], очередь )

Возвращает: jQuery

Описание: Манипулирует очередью функций, которые должны выполняться на соответствующие элементы.

Аргументы

.queue( [ имя ], очередь )

Добавлена в версию: 1.2

имя

Строка

Строка включающая имя очереди. fx по умолчанию, стандартные эффекты очереди.

очередь

Массив

Массив функций для замены содержания текущей очереди.

.queue( [ очередь ], вызов )

Добавлена в версию: 1.2

очередь

Строка

Строка включающая имя очереди. fx по умолчанию, стандартные эффекты очереди.

вызов

Вызов

Новая функция для добавления в очередь, вместе с функцией для вызова она отменяет следующий пункт.

Каждый элемент может иметь от одного до множества присоединенных к нему функций с помощью jQuery. В боольшинстве приложений, только одна очередь ( называемая fx ) используется. Очередь позволяет составить последовательность действий, которая будет призведенна элементом в асинхронном режиме, без остановки выполнения программы. Типичным примером этого является вызов нескольких методов анимации на элементе. Например:

$('#foo').slideUp().fadeIn();

При выполнении этого оператора, элемент начинает сразу анимацию скольжения, но затухающий переход находится на очереди fx, и будет вызван только один раз когда анимация скольжения будет завершена.

Метод .queue() позволяет нам напрямую манипулировать очередью функций. Вызов .queue() с обратным вызовом особенно полезна; она позволяет нам разместить новую функцию в конце очереди.

Эта функция похожа на обеспечение обратного вызова функции с методом анимации, но не требует обратного вызова, чтобы быть предоставленным во время, когда проводится анимация.

$('#foo').slideUp();
$('#foo').queue(function() {
  alert('Animation complete.');
  $(this).dequeue();
});

Это эквивалентно:

$('#foo').slideUp(function() {
  alert('Animation complete.');
});

Обратите внимание, что когда добавляется функция с .queue(), мы уверенны, что .dequeue() будет вызвана соответственно в конце.

В jQuery 1.4 функция, которая вызвана переводом в другую функцию, как первый аргумент, когда вызывается автоматический продвигатель очереди к следующему пункту. Вы можете использовать это следующим образом:

$("#test").queue(function(next) {
    // Do some stuff...
    next();
});

Примеры

Пример 1

Ставит в очередь пользовательскую функцию.

    $(document.body).click(function () {
      $("div").show("slow");
      $("div").animate({left:'+=200'},2000);
      $("div").queue(function () {
        $(this).addClass("newcolor");
        $(this).dequeue();
      });
      $("div").animate({left:'-=200'},500);
      $("div").queue(function () {
        $(this).removeClass("newcolor");
        $(this).dequeue();
      });
      $("div").slideUp();
    });

Результат выполнения кода выше:

Попробуйте сами

Пример 1 - Полный код:

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" language="javascript">
  $(document).ready(function(){
 $(document.body).click(function () {
      $("div").show("slow");
      $("div").animate({left:'+=200'},2000);
      $("div").queue(function () {
        $(this).addClass("newcolor");
        $(this).dequeue();
      });
      $("div").animate({left:'-=200'},500);
      $("div").queue(function () {
        $(this).removeClass("newcolor");
        $(this).dequeue();
      });
      $("div").slideUp();
    });
  });
  </script>
  <style>
  div { margin:3px; width:40px; height:40px;
        position:absolute; left:0px; top:30px;
        background:green; display:none; }
  div.newcolor { background:blue; }
  </style>
</head>
<body>
  Click here...
  <div></div>
</body>
</html>

Попробуйте сами

Пример 2

Задаётся массив, содержащий последовательность действий, для удаления текущей очереди.

    $("#start").click(function () {
      $("div").show("slow");
      $("div").animate({left:'+=200'},5000);
      $("div").queue(function () {
        $(this).addClass("newcolor");
        $(this).dequeue();
      });
      $("div").animate({left:'-=200'},1500);
      $("div").queue(function () {
        $(this).removeClass("newcolor");
        $(this).dequeue();
      });
      $("div").slideUp();
    });
    $("#stop").click(function () {
      $("div").queue("fx", []);
      $("div").stop();
    });

Результат выполнения кода выше:

Попробуйте сами

Пример 2 - Полный код:

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" language="javascript">
  $(document).ready(function(){
    $("#start").click(function () {
      $("div").show("slow");
      $("div").animate({left:'+=200'},5000);
      $("div").queue(function () {
        $(this).addClass("newcolor");
        $(this).dequeue();
      });
      $("div").animate({left:'-=200'},1500);
      $("div").queue(function () {
        $(this).removeClass("newcolor");
        $(this).dequeue();
      });
      $("div").slideUp();
    });
    $("#stop").click(function () {
      $("div").queue("fx", []);
      $("div").stop();
    });
  });
  </script>
  <style>
  div { margin:3px; width:40px; height:40px;
        position:absolute; left:0px; top:30px;
        background:green; display:none; }
  div.newcolor { background:blue; }
  </style>
</head>
<body>
  <button id="start">Start</button>
  <button id="stop">Stop</button>
  <div></div>
</body>
</html>

Попробуйте сами

Была ли эта информация полезной?

Да Нет

queue()

.queue( [ имя ] )

Аргументы

.queue( [ имя ] )

Пример

.queue( [ имя ], очередь )

Аргументы

.queue( [ имя ], очередь )

.queue( [ очередь ], вызов )

Примеры

Пример 1

Пример 2

Комментарии