백분율 기반 너비 jQuery animation

웹 사이트에 대한 간단한 슬라이딩 패널 스크립트를 만들고 있는데, 각 카테고리는 패널이지만 각 너비의 백분율을 사용하는 데 어려움을 겪고 있습니다.백분율 기반 너비 jQuery animation

나는 이것에 대한 개발 jsfiddle를 작성했습니다 : http://jsfiddle.net/estebanrao/FZ6ea/

HTML :

<div class="cat-selector"> 
    <a href="#" class="cat-s-notebooks">Notebooks</a> 
    <a href="#" class="cat-s-desktops">Desktops</a> 
    <a href="#" class="cat-s-smartphones">Smartphones</a> 
</div>

CSS :

.cat-selector { 
    font-size: 0; 
    text-align: center; 
} 
.cat-selector > a { 
    display: inline-block; 
    height: 200px; 
    width: 33%; 
} 
.cat-s-notebooks { 
    background: red; 
} 
.cat-s-desktops { 
    background: green; 
} 
.cat-s-smartphones { 
    background: blue; 
}

JS :

$('.cat-selector') 
    .on('mouseenter', 'a', function() { 
    $(this).animate({ 
     width: '39%', 
    }, 300, 'swing') 
    $(this).siblings('a').animate({ 
     width: '30%', 
     opacity: 0.5 
    }, 300, 'swing') 
}) 
    .on('mouseleave', 'a', function() { 
    $(this).stop().animate({ 
     width: '33%', 
    }, 300, 'swing') 
    $(this).siblings('a').stop().animate({ 
     width: '33%', 
     opacity: 1 
    }, 300, 'swing') 
});

당신이 살펴 경우 ~에서 예를 들어, 3 개의 패널의 전체 폭은 항상 99 %입니다. 문제는 가능한 한 항상 닫는 숫자와 100 %를 일치시키는이 크기를 원한다는 것입니다.

나는 십진법 (.33)을 사용해 보았지만 더 나빠졌습니다. 나는 또한 창의 전체 너비를 얻고 거기에서 수학을 만들려고했지만 실패한 시도이기도합니다.

백분율 (또는 소수점 이하)을 얻기 위해 누락 된 것이 있습니까?

미리 감사드립니다. 난 정말이에 대한 컨테이너, 난 그냥이 CSS를 추가 할 수 필요가 없습니다

.cat-selector-container { overflow: hidden; white-space: nowrap; width: 100%; }

출처

2013-10-30 Tebo

내가 망가지지 않고 100 % 얻는 방법을 모르겠지만'33.2 %'는 크롬에서 적어도 작동하는 것처럼 보입니다. 그러나 다른 브라우저에서도 다르게 작동 할 수 있습니다. %'충분하지 않아? 나는 누군가가 왜 엉망인지 아는 지 궁금하다. 나는 브라우저가 테두리를 다루는 방식 때문에 그 느낌을 가지고있다. – Trevor

이것이 잘 작동하는지 모르겠지만, 부모는 100 %로 설정되어 있으며 오버플로가 숨겨져 있습니다. 그럼 당신은 스크롤바 문제없이 요소에 대해 100 % 이상 약간 갈 수 있습니다 – charlietfl

고마워요! 100 % 너비, 숨겨진 오버플로 및 nowrap 공백 (항목이 인라인 블록 표시가있는 이므로 div) 내부에서 백분율을 조정하여 결국 접을 수 없습니다. – Tebo

는이 문제를 해결하려면 그냥 CSS 속성으로 컨테이너 사업부

<div class="cat-selector-container">

추가 내 .cat-selector div하지만 일부 위쪽 패딩 때문에 스크롤 막대를 피하기 위해이 여분의 div 추가했습니다.

출처

2013-10-30 13:35:35 Tebo

백분율 기반 너비 jQuery animation

답변

관련 문제