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

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

1 голос
/ 20 января 2011

Я реализую плагин David DeSandro 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?");
}
);

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

Dave

1 Ответ

6 голосов
/ 21 января 2011

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

Переданный объект 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
    }
});
...