JQuery Masonry не отвечает на изменение высоты CSS

Question

Я использую как JQuery Masonry, так и Twitter-бутстрап вместе, но испытываю несколько проблем. Я не думаю, что проблема вызвана любым конфликтом между ними.

Я использую миниатюры Bootstrap, чтобы предоставить графические/текстовые divs, а затем с помощью масонства, чтобы упорядочить их все красивее.

Я увлекаюсь тем, что в будущем новое содержимое, вставленное в каждый из этих миниатюр, не слишком сильно ограничено, так как некоторые из них будут динамически загружаться, и я хочу, чтобы divs могли расширяться по мере необходимости. Я хотел бы иметь гибкость для переключения видимости контента или наличия выпадающего содержимого на hovers и т. Д., Который, как это бывает, вызывает масонство для сброса его позиций макета.

Чтобы проверить, как масонство будет реагировать на это, я изменил CSS класса .thumbnail, чтобы при наведении указателя на миниатюры (каждый из которых имеет класс «уменьшенный снимок») он получает нижнее дополнение (которое заставляет его расширять).

Когда масонство загружается, он отлично работает и позиционирует все, исходя из его начального размера.

Когда вы наводите указатель на миниатюры, наведите курсор на css, и контейнеры расширяются по высоте, но заставляют их перекрывать миниатюру ниже.

Чтобы преодолеть это, я связался с внешним .js-файлом и добавил некоторые пользовательские jquery, он приятный и простой и просто выполняет функцию наведения на каждый миниатюру, который говорит масонству обновить/перезагрузить. Это хорошо работает при наведении курсора на миниатюры, css hover пинает, div расширяется, а затем Masonry сбрасывает все div, чтобы лучше всего разместить новый размер div.

МОЯ ПРОБЛЕМА: когда вы выталкиваете мышь из миниатюры Масонство не распознает изменение в режиме «css hover» в исходное состояние, и поэтому высота эскиза уменьшает и оставляет зазор между собой и уменьшенным изображением ниже , Это похоже на то, что масонство не распознает новые значения высоты, когда Div уменьшает высоту, но распознает, когда высота Div расширяется?

Я выполняю ту же функцию в своих пользовательских внешних .js для обоих состояний курсора jQuery и надеялся, что масонство ответит нормально, но нет. Есть идеи?

Я определяю все первоначальное масонство с:

<script type="text/javascript"> 
$(window).load(function(){ 
    $('.container-fluid').masonry({ 
    itemSelector: '.thumbnail', 
    isAnimated: true, 
    animationOptions: { 
     duration: 750, 
     easing: 'linear', 
     queue: false 
     } 
    });  
})    
</script> 

и мой пользовательский .js файл содержит:

$(document).ready(function(){ 
$('.thumbnail').hover( 
    function(){run()}, 
    function(){run()}      
); 
}); 

function run() {$('.container-fluid').masonry('reload');} 

Любая помощь будет оценена.

Благодаря

Answer 1

Как я и подозревал, это, кажется, время, связанные, или событие заказа вопрос.

Это не гарантируется, но я думаю, что триггер handlerOut вызывается перед браузер изменяет размер не парить больше.thumbnail. Но это всего лишь дикое угадание.

Во всяком случае, это то, что вы должны использовать:

$('.thumbnail').hover( 
    function(){run()}, 
    function(){setTimeout(function(){run()}, 200)}      
); 

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

Кажется, работает в этом jsfiddle.