jQuery 애니메이션 아래에서 위로

거기에 하나의 요소의 높이를 애니메이트하는 방법입니다 (div라고 부르겠습니다). 예를 들어, div 요소의 높이가 15px라고 가정 해 봅시다.jQuery 애니메이션 아래에서 위로

<div class='greyBox'> 
<p>Example text</p> 
</div>

그리고 CSS는 다음과 같습니다

.box{height:15px;width:60px;backgroundColor:#000;float:left;margin-left:20px;} 
.box p{opacity:0;}

나는 그 사용이 jQuery를 :

이 가

$('.greyBox').mouseenter(function(){ 
    $(this).animate({height:'50px'},700).children('p').animate({opacity:1},200); 
    });

가

지금 그냥 같은 CSS를 더 박스 (빨간색, 파란색 ...) 추가 적용 각각에. 애니메이션은 작동하지만, greyBox라고 말하면서 적용되면, 옆에있는 빨간색 하나가 움직입니다. 나는 float : 왼쪽에서 인라인 블록으로 변경해 보았지만 행운은 없었다.

이 상자는 너비가 100 %, 아래쪽이 0, 왼쪽이 0 인 절대적으로 위치가 지정된 div로 묶입니다.

p.s. 나는 바이올린을 만들어 직접 볼 수 있습니다. Here it is

많은 감사,

미르코

출처

2012-06-10 suludi

jsFiddle을 만들고 누군가 도움이 될 것입니다. –

네 말이 맞아. 고마워. – suludi

좋아, 여기는 바이올린이다 : [link] (http://jsfiddle.net/BsPju/) – suludi

$('.greyBox').mouseenter(function(){ 

    $(this).animate({height:'50px'},700).children('p').animate({opacity:1},200); 
     $(this).siblings().animate({marginTop: '35px'}, 700) 

    });

http://jsfiddle.net/BsPju/1/

당신은 형제 요소의 marginTop 애니메이션으로 높이를 카운터-역할을 할 수 있습니다.

그렇지 않으면 absolute을 모두 bottom:0 선언으로 배치해야합니다.

출처

2012-06-10 23:44:10 ahren

고마워,하지만 내가 상자가 더 있으면 잘 될까? – suludi

확실합니다. 나는 .siblings() 셀렉터를 사용했기 때문에 같은 부모 안에있는 다른 모든 박스를 선택하게된다. – ahren

고마워, 나는 정말로 이것을 필요로했다. 나는 그것이 절대적인 위치와 함께 작동한다는 것을 알았지 만 그것은 나의 필요에 부합하지 않을 것이다. 이것은 굉장합니다! – suludi

float: left을 display: inline-block으로 변경하고 vertical-align: bottom을 div에 추가하면 원하는 방식이 표시됩니다.

참조 : http://jsfiddle.net/AVXLq/1/

출처

2012-06-10 23:49:48 jimr

고마워, 나는 인라인 블록으로 바꿨지 만, 수직 정렬은 결코 내 마음을 넘지 못했다. 두 답을 모두 맞으면 좋겠지 만 이전 답은 정확하므로 몇 초 만에 끝납니다. – suludi

jQuery 애니메이션 아래에서 위로

답변

관련 문제