Обратный вызов Jquery не работает, когда включены параметры анимации (плагин кладки)

Я внедряю плагин JQuery Masonry Дэвида ДеСандро для сайта, который я пытаюсь создать. Я пытаюсь запустить обратный вызов функции каменной кладки, чтобы я мог прокрутить до соответствующей части страницы после ее запуска, но по какой-то причине не могу заставить ее работать, когда у меня включена анимация. Документы можно увидеть по адресу http://desandro.com/demo/masonry/docs/#options. . Когда я запускаю следующий код, он работает нормально, и предупреждение появляется только после запуска функции каменной кладки:

$wall.masonry(
{
columnWidth: 216,
itemSelector: '.box:not(.invis)',
animate: false
},
function()
{
alert("Finished?");
}
);

Однако, когда я запускаю следующий код с включенными параметрами анимации, предупреждение запускается до завершения анимации:

$wall.masonry(
{
columnWidth: 216,
itemSelector: '.box:not(.invis)',
animate: true,
animationOptions: {
  duration: speed,
  queue: false
}
},
function()
{
alert("Finished?");
}
);

Я был бы очень признателен за любые подсказки, которые кто-либо может дать мне о том, как предотвратить появление предупреждения до тех пор, пока анимация не завершится, поскольку я в тупике! Большое спасибо за Вашу помощь,

Дэйв


javascript jquery jquery-plugins jquery-callback
person deshg    schedule 20.01.2011    source источник
comment
Вы проверили, правильно ли определена переменная скорости?   -  person Axel Fontaine    schedule 20.01.2011
comment
Да, переменная скорости правильно определена, код каменной кладки и анимация работают отлично, просто предупреждение не ждет завершения анимации перед ее запуском (если анимация включена). Большое спасибо за вашу помощь, любые другие мысли будут высоко оценены!   -  person deshg    schedule 20.01.2011

Ответы (1)


arrow_upward
6
arrow_downward

Есть кое-что, что вы можете сделать, но для работы в вашем понимании требуется небольшой взлом:

Передаваемый объект animationOptions может принимать свойство complete, определяющее функцию, которая будет запущена после завершения анимации.

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

var boxCount = $wall.find('box').size(),
    counter = 0,
    onComplete = function() {
        if (counter < boxCount) counter++;
        else {
            alert("Finished?"); // <-- Here goes your actual callback!
            counter = 0;
        }
    }

$wall.masonry({
    columnWidth: 216,
    itemSelector: '.box:not(.invis)',
    animate: true,
    animationOptions: {
        duration: speed,
        queue: false,
        complete: onComplete
    }
});
person polarblau    schedule 20.01.2011
comment
Вы абсолютный гений, большое спасибо, именно в этом была проблема, я не знал, что она будет запускаться после каждой анимации. Большое спасибо за вашу помощь, это очень ценится. - person deshg; 27.01.2011
comment
К сожалению, у меня недостаточно очков репутации, чтобы поставить лайк вашему ответу, иначе я бы поступил так, как будто это совершенно правильно, еще раз большое спасибо :) - person deshg; 27.01.2011
comment
Отлично, что это работает. Пожалуйста, отметьте этот ответ как «правильный», если он поможет вам. - person polarblau; 28.01.2011
comment
Извините, я пропустил это! Теперь я отметил это как правильное, еще раз большое спасибо за вашу помощь! - person deshg; 28.01.2011