jQuery Masonry가 slideToggle 이벤트에서 divs를 겹치고 있습니다.

Question

현재 jQuery Masonry 플러그인에 성가신 버그가 있습니다. 여기 거래가 있습니다 : 저는 두 열로 된 FAQ 페이지를 만들고 싶습니다. 여기서 divs를 벽돌로 띄웁니다. 이 div 안에는 slideToggle 이벤트를 트리거하는 h3-Tag가 있으며 숨겨진 div (div.answer)가 확장됩니다. 문제는 h3 태그를 클릭하고 이벤트를 트리거하면 div.answer가 펼쳐지지만 최종 및 올바른 위치에 도달 할 때까지 div를 몇 초 동안 오버레이합니다. (당신이 볼 수 있듯이, 난 이미 스크립트 내부의 여러 위치에서 벽돌 기능을 기억하려고 노력하지만,이 문제를 해결 didnt는) 다음

$(document).ready(function() { 
      $('.answer').hide(); 
      $('#container').masonry(); 
      $('.show').click(function() { 
       imgelem = $(this); 
       $(this).parent().next().stop().slideToggle("slow", function() { 
        $('#container').masonry('reload'); 
        if ($(this).css("display") == "none") { 

         imgelem.attr("src", "images/expand.png"); 
        } 
        else { 
         imgelem.attr("src", "images/collapse.png"); 
        } 
       }); 
        $('#container').masonry(); 
      }); 
      $('#container').masonry('reload'); 
     }); 

: 여기

는 slideToggle 이벤트에 대한 스크립트입니다 당신은 문제를 볼 수 있습니다 : http://jsfiddle.net/2huZd/3/

나는 누군가가 나를 도울 수 있기를 바랍니다!

편집 : 아무도이 문제를 해결할 수 있습니까? :

Answer 1

다른 masonr-like 플러그인 (shapeshift)과 동일한 문제가있었습니다. 슬라이드 효과가 완료 될 때까지 slideToggle의 콜백 이벤트가 발생한다는 것입니다. (i havn ' atleast) 각 슬라이드 단계에서 벽돌을 다시 초기화 할 수있는 "동안"이벤트가 발생했습니다.

슬라이드 쇼 효과를 표시/숨기기 토글로 바꾸는 것이 유일한 해결책이었습니다. 상자의 성가신 중복 효과로 ' 더 이상 볼 수 없으며 UX가 더 나아질 것입니다.

Answer 2

slideToggle() 함수에 step 옵션을 사용하고 석공 술에 다시 계산하도록 지시 할 수 있습니다. 각 단계의 위치 ... 그리드에 너무 많은 요소가있는 경우 처리 할 정보가 너무 많을 수 있습니다.