초점이 맞지 않는 애니메이션 중지

jQuery Chosen으로 만든 사용자 친화적 인 다중 선택이 있습니다. 여러 요소를 선택할 때 컨테이너 div의 높이가 증가하고 컨테이너 div가 포커스 인 경우 높이를 auto로 설정했지만 에있는 경우 고정 높이로 설정합니다.초점이 맞지 않는 애니메이션 중지

$('.chosen-container-multi').live('focus', function(event) { 
    var select = $('.chosen-container-multi').find(".chosen-choices"); 
    var curHeight = select.height(); 
    var autoHeight = select.height(); 

    curHeight = select.height(); 
    autoHeight = select.css('height', 'auto').height(); 
    select.height(curHeight).stop(true, true).animate({height: autoHeight}, 300); 

    event.stopPropagation(); 
}).live('blur',function(){ 
    $('.chosen-container-multi').find(".chosen-choices").animate({height: 30}, 300); 
});

jsFiddle

enter image description here

문제는 그 다음 항목에 높이가 30 픽셀로 애니메이션 사업부 컨테이너 외부 (옵션이 들어있는 DIV)를 클릭 한 경우 자동에 반환된다 (위의 gif 이미지 참조). 이 동작을 어떻게 방지합니까?

정말 고마워요! 나쁜 영어로 미안해! :)

출처

2013-10-14 Mustapha Aoussar

그것은 나를 위해 잘 작동합니다. 어떤 브라우저가이 동작을 제공합니까? – Broxzier

Google 크롬 v30.0이지만 Firefox v24.0에서도 테스트를했는데 동일한 문제가 발생합니다. 옵션을 선택한 다음 해당 옵션을 다시 선택하십시오 (사용할 수 없으며 회색 텍스트로 표시됨). –

모든 옵션을 선택하고 옵션이 이미 선택되어 있더라도 다시 시도하십시오. –

입력 요소에만 적용되지 않고 두 요소의 부모에 blur 콜백 함수를 캐스팅해야합니다. 동일한 상위 내 입력 필드 다음에 다른 요소가 만들어지기 때문입니다. 나는 업데이 트했습니다 당신의 jsFiddle

$('.chosen-container-multi').live('focus', function (event) { 
    var select = $('.chosen-container-multi').find(".chosen-choices"); 
    var curHeight = select.height(); 
    var autoHeight = select.height(); 

    curHeight = select.height(); 
    autoHeight = select.css('height', 'auto').height(); 
    select.height(curHeight).stop(true, true).animate({ 
     height: autoHeight 
    }, 300); 

    event.stopPropagation(); 
}); 

// !! Selector of the parent 
$('.chosen-select').live('blur', function() { 
    $('.chosen-container-multi').find(".chosen-choices").animate({ 
     height: 30 
    }, 300); 
});

출처

2013-10-14 14:10:59 Broxzier

초점이 맞지 않는 애니메이션 중지

답변

관련 문제