jQuery 애니메이션 세로 맞춤

중간에 세로로 정렬 된 일부 콘텐츠가 있습니다. 버튼을 클릭하면 내용이 vertical-align: top으로 변경되지만 애니메이션은 슬라이드 업 (슬라이드 업)됩니다. 그것은이 비록 작동하지 않는 것 같다jQuery 애니메이션 세로 맞춤

HTML

<div id="container"> 
    <div id="content">Hello World</div> 
</div> 

<input type="button" id="myButton" value="No Animation" /> 
<input type="button" id="myButton2" value="Animation" />

CSS

#container { width: 500px; height: 400px; background: #eee; } 
#container:before { content: ''; display: inline-block; width: 1px; height: 100%; vertical-align: middle; background: red; } 
#content { display: inline-block; vertical-align: middle; background: lime; }

$('#myButton').click(function(){ 
    $('#content').css('vertical-align', 'top'); 
}); 

$('#myButton2').click(function(){ 
    $('#content').animate({ 'vertical-align': 'top' }, 500); 
});

JS Bin

출처

2013-08-02 Chris

jQuery가''top ''값을 어떻게 애니 메이팅해야한다고 생각합니까? 숫자 만 애니메이션 될 수 있습니다! – adeneo

애니메이션이 어떻게 작동하는지 실제로 생각하지 않았던 것 같습니다. 나는 그것이 단지 위치 A와 위치 B를 해결하고 그 사이에 마법을 작동시킬 것이라고 기대했었다. – Chris

불행히도 vertical-align을 애니메이트 할 수 없습니다. 극소수의 예외를 제외하고 애니메이션 기능은 숫자 값에 대해서만 작동합니다. JQuery와 animate() docs에서 :

모든 애니메이션 속성
이 해결 방법으로 단일 숫자 값

에 애니메이션되어야한다, 동적 컨텐츠의 top 위치를 설정할 수 있습니다, 그 애니메이션 :

var content = $('#content'), 
    contentHeight = content.height(); 
    containerHeight = $('#container').height() 
; 

content.css("top", containerHeight/2 - contentHeight/2) 

$('#myButton').click(function() { 
    content.css('top', 0); 
}); 

$('#myButton2').click(function() { 
    content.animate({ 
     'top': 0 
    }, 500); 
});

Working Demo

출처

2013-08-02 14:17:30 cfs

도움을 주셔서 감사합니다. 나는 숫자 값에 너무 많이 의존하여 애니메이션을 만들지 못했습니다. 나는 당신의 솔루션 (중앙 컨텐츠가 동적으로 변경되고 CBA가 수직 리스너를 업데이트하기 위해 이벤트 리스너를 갖기를 원하지 않음) 대신 약간의 푸쉬 다운 마진을 추가합니다. – Chris

차가워졌습니다. 어떤 생각을 테이블 셀의 내용으로 어떻게 할 것인가? – spy

안녕하세요 @ 스파이 :) 아마도 자신의 질문으로 이것을 물어 보는 것이 가장 좋습니다. 그런 식으로 답을 얻는 것이 훨씬 더 많을 것입니다. 행운을 빕니다! – cfs

측정을 사용하면 수직 정렬을 활성화 할 수 있습니다!

vertical-align values

설정하여 수직 정렬 % 나 픽셀 같은 것으로 그의 전환을 포함한다.

.item5, .item6 { 
 
    color: #fff; 
 
    display: inline-block; 
 
    text-align: center; 
 
} 
 

 
.item5 { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: #03A9F4; 
 
} 
 
.item6 { 
 
    width: 150px; 
 
    height: 150px; 
 
    background: #ff5722; 
 

 
} 
 

 
.item6:after { 
 
    content: ''; 
 
    width: 1px; 
 
    height: 1px; 
 
    background: black; 
 
    -webkit-animation: move 2s infinite alternate; 
 
    -moz-animation: move 2s infinite alternate; 
 
     -o-animation: move 2s infinite alternate; 
 
      animation: move 2s infinite alternate; 
 
} 
 

 
@-webkit-keyframes move { from { vertical-align: 0% } to { vertical-align: 100% } } 
 
    @-moz-keyframes move { from { vertical-align: 0% } to { vertical-align: 100% } } 
 
    @-o-keyframes move { from { vertical-align: 0% } to { vertical-align: 100% } } 
 
     @keyframes move { from { vertical-align: 0% } to { vertical-align: 100% } }

<div class="item5">1</div> 
 
<div class="item6">2</div>

내가 비록 브라우저 지원의 확실하지 않다 :

또는 jQuery를 사용하므로 같은 CSS의 키 프레임을 포함하는 클래스를 적용!

출처

2015-02-20 17:37:20 Clarence

jQuery 애니메이션 세로 맞춤

답변

관련 문제