Обратный звонок для jquery плагин Изотоп - PullRequest
Новая
       4

Обратный звонок для jquery плагин Изотоп

6 голосов
/ 25 марта 2011


Я использую изотоп (http://isotope.metafizzy.co) с расширяемыми элементами, и я хотел бы использовать ScrollTo, чтобы я мог автоматически прокручивать до нового расширенного элемента ..

Iсначала попытался использовать обратный вызов с методом reLayout, что-то вроде: 

container.isotope('reLayout', iwannascroll(origin));

function iwannascroll(origin_with_newpos){
    $.scrollTo(origin_with_newpos, 800);                
}

origin - переменная, где я помещаю «this» из обработчика щелчка.
К сожалению, я всегда получаю старую позициюобъект ..

На самом деле я не уверен, что обратный вызов вызывается слишком рано или я не могу понять, как хранение моего объекта jQuery делает его больше похожим на копию или «указатель» ;-)

Есть мысли?

РЕДАКТИРОВАТЬ: теперь я уверен, что обратный вызов вызывается до конца анимации, поэтому мой вопрос будет: как я могу теперь завершить анимацию?

Ответы [ 5 ]

7 голосов
/ 25 марта 2011

Allright,

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

animationOptions: {
    duration: 4000,
    easing: 'easeInOutQuad',
    queue: false,
    complete: iwannascroll
}

тогда я смог отфильтровать развернутый объект и прокрутить до него: 

            function iwannascroll(){
                var target = $(this);
                if (target.hasClass('expanded'))
                    $.scrollTo(target, 800);                
            }

очевидно, что это будет работать, только если вы используете анимационный метод jQuery для анимации. Если кто-нибудь знает лучший и «универсальный» способ, я бы с удовольствием его услышал;)

5 голосов
/ 22 мая 2013

Обратный вызов для Isotope reLayout запускается слишком рано.

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

Это работает и для движка анимации jquery и css.* 

$("#isotope").bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){

});

ps: это нужно поставить после обычного изотопного кода, конечно.

Привет, Мануэль

2 голосов
/ 10 мая 2013

Я использую этот хак для обратного вызова. Может быть, это работает для вас. 

setTimeout(function(){
        $container.isotope('reLayout');
    }, 1000);
2 голосов
/ 01 июля 2011

Недавно я пытался реализовать вашу идею с помощью animationOptions / complete-function, но не смог заставить ее работать должным образом.вот когда я придумал этот, получая анимацию, напрямую добавляя эти команды jquery к вызову изотопа ..

первая загрузка изотопа для отображения макета / кладки: 

container.isotope({
    itemSelector: '.selector',
    masonry: {
        columnWidth: smallWidth,
    }
});

..и затем во второй вызов включите reLayout / изменение размера внутри функции щелчка: 

$('.selector').click(function(){
var $this = $(this),
    tileStyle = $this.hasClass('large') ? { width: smallWidth } : { width: largeWidth };
$this.toggleClass('large');     
$this.find('.selector').stop().animate( tileStyle );   

    // Here we search for the enlarged isotope-selector and apply the scroll
    // function to it...the item position is available to jquery at this point.
$container.isotope( 'reLayout' ).find($this).each(function() {
    var target = $(this);
    if (target.hasClass('large'))
                $.scrollTo(target, 800,{offset:-50});
    });
});

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

1 голос
/ 02 августа 2011

Мне удалось связать события webkitTransitionEnd и transitionend моего контейнера вместе с обратным вызовом animationOptions.complete для получения желаемых результатов в браузерах. Вы можете использовать обычную функцию, которая выполняется этими тремя и поместить туда любую необходимую логику.

...