div 같은 높이의 애니메이션을 문서에 준비하십시오.

Question

나는 equal-heights.js라는 스크립트를 가지고 있는데,이 스크립트는 underscore.js와 함께 작동합니다. div를 애니메이션 (선택 사항)이있는 최상위 div의 크기와 동일하게 만듭니다. 문제는 페이지를 충전 할 때 아무 일도 일어나지 않는다는 것입니다. 브라우저의 크기를 조정할 때만 div가 균등화되기 시작합니다.

html로의 초기화하는 코드 : 페이지가로드, 애니메이션이 시작할 때 http://webdesign.igorlaszlo.com/templates/js/blogger-equal-heights-responsive.js는

어떻게해야 무엇을 동일하게하는 것을 : 당신은 여기에 동일한-heights.js 볼 수 있습니다

$(document).ready(function() { 

    $('.profile-panel').equalHeights({ 
     responsive:true, 
     animate:true, 
     animateSpeed:500 
    }); 

}); 

divs가 자동으로?

Answer 1

필자 만의 테스트를 만들었고 플러그인 작성 방법에 문제가 있다는 것을 깨달았습니다. 즉, 클래스 이름에 대해 하나의 값만 허용합니다. 그렇지 않으면 중단됩니다.

이

때문에 스크립트에 다음 줄입니다 :

className = '.'+$(this).prop('class'); 

이것이하는 일은 그것이 당신의 요소의 class 속성을 취하고 앞에 점 (.)를 추가하는 것입니다; 여러 클래스 이름이있는 경우, 그것은 단지 첫 번째 앞에 점을 넣어 때문에 그래서 만약 당신이, 현재의 선택을 받고 매우 확장 성이 좋은하지만 방법 ...

<div class="profile-panel profile-panel-1st-row profile-panel1"> 

.. .

$('.profile-panel profile-panel-1st-row profile-panel1') 

... 이렇게 나머지 클래스에서는 점이 누락되어 제대로 작동하지 않습니다.

버전 1.7까지는 jQuery가 .selector 속성을 가졌지 만 이제는 더 이상 사용되지 않습니다. 대신 그들은 지금 (내가 상황에 맞게) 다음과 같이 플러그인의 함수의 인수로 선택기를 추가 할 제안하고 있습니다 :

$('.profile-panel-1st-row').equalHeights({ 
     selector:'.profile-panel-1st-row', 
     // ... 
    }); 

:

먼저이 함수를 호출 할 때 옵션이 selector라고 정의

그런 설정은 플러그인 내부의 className 변수는 다음과 같이

var className = options.selector; 

당신이 할 수있는 또 다른 것은 당신이 우리에게 원하는 각 요소에 대해 처음으로 플러그인을 활성화하는 데 사용하는 클래스 장소입니다 ... 이렇게 ... ... 그래서 대신에

<div class="profile-panel-1st-row profile-panel profile-panel1"> 

을

<div class="profile-panel profile-panel-1st-row profile-panel1"> 

그것을 전자 ... 당신은 설정 플러그인 내부의 className 변수는 다음과 수 :

기본적으로 클래스 이름을 공백으로 나눈 부분으로 나누고 첫 번째 것을 취합니다.

이 두 솔루션의 최고가하려면 다음과 className 설정 : 애니메이션에 관해서는

var className = options.selector || '.'+ $(this).prop('class').split(" ").slice(0,1); 

, 단지 크기 조정 작동을; 그 그 내가 jsfiddle에 추가하는 플러그인이 내장 된 방법, 당신은 플러그인 작성자의 원래의 예를 함께 놀러 수있어, 의도 : http://jsfiddle.net/o9rjvq8j/1/

편집 # 2 : 당신은 플러그인을 변경 행복 경우 심지어는 if(settings.responsive === true) 수표에서 $(window).resize(function()을 삭제하면 제대로 작동합니다.)이 설치 작업 예/데모를 할 수 있다면

if(settings.responsive === true) { 
    //reset height to auto 
    $(className).css("height","auto"); 
    //re initialise 
    reInit(); 
}