В jQuery, как использовать несколько методов delay () с css ()?

Question

Как я могу добиться следующего, понимая, что если была только одна задержка, я мог бы использовать setTimeout:

$(this).css().delay().css().delay().css();

РЕДАКТИРОВАТЬ:

Измененные значения CSS не являются числовыми.

Answer 1

API jQuery ".delay ()" полностью посвящен "очереди эффектов". Это на самом деле возвращается немедленно.

Единственный способ сделать это, если вы не анимируете изменения CSS, это с помощью setTimeout ().

Одна вещь, которая может сделать вещи более приятными, это встроить ваши CSS-изменения в массив:

var cssChanges = [
  { delay: 500, css: { backgroundColor: "green", fontSize: "32px" }},
  { delay: 1000, css: { backgroundColor: "blue", textDecoration: "underline" }},
  { delay: 750, css: { position: "relative", marginLeft: "5px" }}
];

Затем вы можете использовать одну процедуру для просмотра списка с нужными задержками:

function doChanges(cssChanges) {
  var index = 0;
  function effectChanges() {
    $('whatever').css(cssChanges[index].css);
    if (++index < cssChanges.length) {
      setTimeout(doChanges, cssChanges[index].delay);
    }
   }
   setTimeout(effectChanges, cssChanges[0].delay);
 }

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

Answer 2

delay() работает только с анимацией , IIRC.

Это будет работать для вас:)

// Delay to CSS Properties
var cssChanges = [
    {
    delay: 500,
    css: {
        color: 'red'
    }},
{
    delay: 1500,
    css: {
        color: 'blue'
    }},
{
    delay: 500,
    css: {
        color: 'yellow'
    }}
];

var element = $('div'),
    lastDelay = 0;

$.each(cssChanges, function(i, options) {
    lastDelay += parseInt(options.delay);
    setTimeout(function() {
        element.css(options.css);
    }, lastDelay);
});

jsFiddle .

Обновление

Вы также можете превратить его в плагин jQuery.

$.fn.delayCss = function(cssChanges) {
    $(this).each(function() {
        var element = $(this),
            lastDelay = 0;
        $.each(cssChanges, function(i, options) {
            lastDelay += parseInt(options.delay);
            setTimeout(function() {
                element.css(options.css);
            }, lastDelay);
        });

    });
}

jsFiddle .

Answer 3

css не является эффектом, это происходит сразу.Если вам нужно несколько css изменений в шахматном порядке, setTimeout - это именно то, что вам нужно:

var $target = $("#target");
$target.css("color", "blue");
setTimeout(function() {
  $target.css("color", "red");
  setTimeout(function() {
    $target.css("color", "green");
  }, 500);
}, 500);

Живой пример

Если вы пытаетесьделать с css - это то, что вы можете сделать вместо animate (например, числовые свойства, а не цвета, как указано выше), тогда ваш код будет в основном работать, если вы используете animate вместо css.

$("#target")
  .animate({paddingLeft: "50px"})
  .delay(500)
  .animate({paddingLeft: "25px"})
  .delay(500)
  .animate({paddingLeft: "0px"});

Живой пример

Answer 4

Вы все еще можете использовать setTimeout.Вам просто понадобится несколько из них.

Или вы можете использовать .animate() с продолжительностью 0 вместо .css():

Пример: http://jsfiddle.net/6sewU/

$(this).animate({prop:'value'},0).delay(1000)
       .animate({prop:'value'},0).delay(1000)
       .animate({prop:'value'},0);

Обратите внимание, что вам нужно установить jQueryUI, если вы устанавливаете цвет с помощью .animate().