jQuery 애니메이션 표 셀

a 태그를 애니메이션화하려고하는데, 찾고있는 효과를 얻기 위해 table-cell의 CSS 속성이 있습니다. 누군가 jQuery를 사용하여 그것을 클릭 할 때 움직이기를 원하지만 작동하지 않습니다. table-cell 때문에 발생한다고 생각하지만 table-cell을 제거하면 레이아웃이 손상됩니다. Here is the page I am working with. http://jsfiddle.net/nEryb/ 여기jQuery 애니메이션 표 셀

.clip{ 
    background-color: #373938; 
    min-height: 100%; 
    height: 100%; 
    width: 300px; 
    background-position: center center; 
    background-size: auto 100%; 
    background-repeat: no-repeat; 
    display: table-cell; 
    box-shadow: -2px 0 5px rgba(0,0,0,.2), -2px -2px 5px rgba(0,0,0,.2), -2px 2px 5px rgba(0,0,0,.2); 
    text-align: center; 
    filter: grayscale(100%); 
    filter: url(/media/images/new/filters.svg#grayscale); 
    filter: gray; 
    -webkit-filter: grayscale(1); 
    position: relative; 
}

가 JQuery와입니다 : 여기

는 바이올린입니다

$(document).on("click", "a.clip", function(e){ 
    e.preventDefault(); 
    window.history.pushState("Gallery", "Gallery", $(this).attr("href")); 
    $("a.clip.hover").animate({ 
     height: "20px" 
    }, "fast"); 
});

나는 이것이 작동하도록하기 위해 무엇을 할 수 있는가?

출처

2013-07-24 Get Off My Lawn

$ ('. clip')으로 시작하십시오. ('click', function() {}); – Chad

CSS table-model을 올바르게 사용하려면 브라우저에서 어떻게 그러한 모델을 렌더링하는지 이해해야하며, 어떤 것이 each concept really means인지 이해해야합니다.

요약하면 테이블 셀은 격자의 모든 상대 좌표를 포함 할 수 있도록 전체 공간을 차지하기 때문에 코드가 작동하지 않습니다. 테이블이 어떻게 작동해야하는지 생각하면 의미가 있습니다. 그래서 역사적으로 테이블을 동작시키는 것이 어려웠던 것입니다. 그리고 여기에서 많은 질문을 볼 수 있습니다.

하나의 해결책은 실제로 애니메이션과 CSS 속성의 대부분을 포함 된 블록 요소에 적용하는 것일 수 있습니다.

다음 예제에서는 anchor 요소를 포함하여 마크 업을 사용했지만 CSS에서는 display: block이됩니다.

Example 1

또 다른 해결책은 테이블 모델을 포기하고 요소 inline-block을 사용하는 것입니다. 그 display: table을 제거하고 display: table-cell을 display: inline-block으로 변경하십시오. 그것을 명확하게 width: 20%주고, 또한, 당신의 높이가 유지하는 한 당신의 높이가 어디에도 없다. min-height: 100% 그리고 변경하지 마라. 테이블 모델은 어떻게 든 상대 세포의 크기를 변경할 수 없기 때문에

Example 2

출처

2013-07-24 02:39:46 Sunyatasattva

좋아요! 감사! 나는 방법 # 2로 갔다. –

당신은 새끼 고양이 때문에 그것을했다, 그렇지? ;) – Sunyatasattva

그것이 바로 이유입니다! 다른 결정 요인이 없었습니다 :) –

당신은 display: inline-block를 사용할 수 있습니다. 어쨌든, 당신의 jQuery 코드에서, 당신은 특정 상자를 애니메이션에 대한 $(this) 선택기를 사용해야 여기

$(document).on("click", "a.clip", function(e) { 
    e.preventDefault(); 
    window.history.pushState("Gallery", "Gallery", $(this).attr("href")); 
    $("a.clip.hover").animate({ 
     height: "20px" 
    }, "fast"); 
});

를 클릭 업데이트입니다 : http://jsfiddle.net/nEryb/1/

나는 또한 당신의 선택은 a.clip.hover을 가지고 나타났습니다. click 대신 hover 이벤트를 사용해야합니다.

출처

2013-07-24 02:47:55

jQuery 애니메이션 표 셀

답변

관련 문제