Я делаю страницу в стиле кладки с полями, которые расширяются при нажатии.Я сделал код javascript таким образом, чтобы при нажатии на другое поле все остальные блоки по умолчанию имели свой первоначальный размер;то есть: только одна коробка будет расширена за один раз.
Это прекрасно работает!
Дело в том, что изотоп не анимирует изменение размеров коробок, только изменение положения!
Итак, я вызвал плагин пользовательского интерфейса jquery для анимации функции переключающего класса, чтобы анимировалось не только расположение элементов, но и само расширение самого элемента.
НО, увы,что-то в пользовательском интерфейсе jquery и изотопе не совсем совпадают, а это означает, что перепозиционирование элементов каким-то образом портится.
Код javascript для примеров такой:
Сначала работает тот, который работает:
$(document).ready(function() {
var $container = $('#masonrycontainer');
$($container).isotope({
masonry : {
columnWidth : 100
}
});
// change size of clicked element
$container.delegate( '.isotopeelement', 'click', function(){
$('.isotopeelement').not(this).removeClass('maxsize');
$(this).toggleClass('maxsize');
$container.isotope('reLayout');
return false;
});
});
Тогда тот, который не работает (обратите внимание, что миллисекунды - единственное различие между двумя примерами):
$(document).ready(function() {
var $container = $('#masonrycontainer');
$($container).isotope({
masonry : {
columnWidth : 100
}
});
// change size of clicked element
$container.delegate( '.isotopeelement', 'click', function(){
$('.isotopeelement').not(this).removeClass('maxsize', 300);
$(this).toggleClass('maxsize', 300);
$container.isotope('reLayout');
return false;
});
});
Кто-нибудь знает, в чем проблема, иликак это решить?Заранее всем большое спасибо.
// A.