멋진 레이아웃 기능으로 Isotope를 사용하고 있습니다. Ajax를 통해 새 항목을 가져 오는 호출이 있는데, 이전 항목이 제거되고 새 항목이 앞에 추가됩니다. 애니메이션은 정말 매끄럽게 보입니다. 그러나 애니메이션이 완료되면 콜백을받을 수 없습니다. 동위 원소 이벤트가 실행되지 않습니다.
나는 자신의 사이트에 자신의 문서에서이 사용을 시도하고있다 : 나는 이런 식으로 구현 한$grid.on('arrangeComplete', onArrange);
:
$grid = $('#grid').isotope({
itemSelector: '.item'
});
$grid.on('arrangeComplete', function(){
console.log('arrangeComplete')
});
그러나 이것은 단지 나를 위해 작동하지 않습니다. 사건은 결코 해고되지 않습니다. 내가 애니메이션의 완성하지만, 내가 가지고있는 문제에 대한 잘못된 이벤트를 사용하고있는 경우
//Remove
$grid.isotope('remove', removeItems); //removeItems being a var this works fine
//Add
$grid
.prepend(assets)
.isotope('appended', assets)
.isotope('reloadItems')
.isotope({sortby: 'original-order'});
//again this all works fine
잘 모르겠어요은 아무도이다 :
나는 새로운 항목을 제거하고 붙이는 두 가지 기능을 가지고 그들은 해고 된 것 같습니다. 순간
나는 장소에서 해킹이 있습니다
$grid.bind("transitionend", function(){
해킹의 작품을하지만 그것이 발사 얼마나 많은 항목 페이지에 따라 의미 각 요소 전환의 말에 이벤트를 트리거 그들의 전이가 모두 제거되고 다음 항목의 모든 전이가 앞에 붙습니다. 이것은 분명히 나를위한 문제입니다.
이 문제에 대한 도움이나 조언을 보내 주시면 감사하겠습니다.
'function() {}'또는 DOM 준비에서 코드를 래핑 했습니까? –
예, 모두 지우기, 추가 및 인스턴스 초기화를위한 별도의 함수로 나뉩니다. 그것의 초기화에 실제로'.on ('arrangeComplete'... ')이 포함되어 있습니다. – ThePagan
이 말은'$ (document) .ready ({$ grid.isotope ({...})})' –