Обратные вызовы jQuery с включением каменной кладки
У меня есть основной переключатель, который показывает отделение, на которое нажимают, при закрытии всех других подобных отделений. Это работает просто великолепно, переключатель не является проблемой. Посмотрите ниже:
$(document).ready(function(){
$('.threadWrapper > .littleme').click(function() {
$(this).next().toggle('slow');
$(this).toggle('slow');
$('.littleme').not(this).next().hide('slow');
$('.littleme').not(this).show('slow');
return false;
}).next().hide();
});
Я также использовал масонство, включающееся для jQuery, который организует все выбранные элементы отделения горизонтально и затем вертикально. Блестящий, который работает также на все виды различных высот отделения. Посмотрите ниже:
$(function(){
$('#mainContent').masonry({
columnWidth: 200,
itemSelector: '.threadWrapper:visible',
});
});
То, что я хочу, чтобы это сделало, реорганизовывают расположение каждый раз, когда отделение разворачивает или сворачивает. В действительности инициирование .masonry управляет как обратный вызов для начальной буквы .click функция. Это - то, что не работает на меня. Appologies для вопроса о новичках.
Посмотрите как его в настоящее время рабочий здесь: kalpaitch.com
Andrew
Простак - спасибо за проверку синтаксиса, я довольно хорош в fluffing они и затем тратящий о бегающем вокруг получаса, ища их.
Cyro - Это прекрасно и работы, я буду использовать это для ближайшего будущего. То, что я намеревался включить, было то, как это будет достигнуто в случае, показывают/скрывают/переключают их СО скоростью анимации (код выше измененного соответственно). Затем вызов каменной кладки стрелял бы, прежде чем отделения расширены (как это в настоящее время происходит по kalpaitch.com). Большое спасибо за ответ, хотя, его определенно легче этот путь.
3 ответа
Попробуйте заново запустить вызов кладки, чтобы настроить страницу после разрешения изменений щелчком мыши:
$(document).ready(function(){
$('.threadWrapper > .littleme').click(function() {
$(this).next().toggle();
$(this).toggle();
$('.littleme').not(this).next().hide();
$('.littleme').not(this).show();
// re-run masonry
$('#mainContent').masonry({
columnWidth: 200,
itemSelector: '.threadWrapper:visible'
});
return false;
}).next().hide();
});
EDIT: Глядя на документы Masonry, кажется, что Masonry сохранит ваши первоначальные настройки, так что вам нужно просто вызвать основной метод еще раз. Это также должно сработать:
$(document).ready(function(){
$('.threadWrapper > .littleme').click(function() {
$(this).next().toggle();
$(this).toggle();
$('.littleme').not(this).next().hide();
$('.littleme').not(this).show();
// re-run masonry
$('#mainContent').masonry();
return false;
}).next().hide();
});
У вас есть неправильный путь, в котором вы включаете файл Masonry.js ..
Вы используете JS / jQuery.masonry.js , когда он должен Be JS / jQuery.masonry.js (Capital JS)
, и у вас есть дополнительная запятая () в конце вариантов, которые вы переходите на кладки ..
После того, как вы исправите эти ошибки В вашем примере просто запустите код кладочного клавиши еще раз, как Cryo упоминается в своем ответе ...
У меня также был переключатель, и я не мог перезагрузить кладку для этого эффекта. Но я заставил кладку перезагружаться, когда элементы исчезли (отфильтрованы).