jQuery를 사용하여 애니메이션 효과를 만들었습니다.
UPD : 이것은 Chrome에서만 작동합니다!
이 애니메이션 효과는 애니메이션이 끝난 후에 만 녹색 SPAN이 외부 빨간색 DIV에서 나오는 것을 제외하고는 제대로 작동 합니다 . 왜? 녹색 SPAN이 애니메이션 시작과 함께 즉시 빨간색 DIV 위에 있었으면합니다. 저는 CSS에 강하지 않습니다. 나는 z-index및 position스타일로 연주 했지만 원하는 결과를 얻지 못했습니다.
HTML :
<div class="ext_div">
<div class="int_div"><span>A</span></div>
</div>
CSS :
.ext_div {
-webkit-transform: rotate(-50deg);
}
div.ext_div div {
background-color: red;
position: relative;
margin-top: -400px;
padding-left: 80px;
width: 200px;
height: 250px;
font-size: 350px;
}
div.ext_div div span {
background-color: green;
width: 100px;
float: left;
-webkit-transform: skewY(50deg);
-moz-transform: skewY(50deg);
-o-transform: skewY(50deg);
-ms-transform: skewY(50deg);
transform: skewY(50deg);
}
jQuery-CODE :
$(document).ready(function() {
$(".int_div").queue(function () {
$(this).animate({width: "150", height: "125", right: "+=200", "font-size": "150px" }, 1200)
.queue(function () {
$(this).addClass("myclass");}).dequeue();
});
return false;
});
내 문제를 어떻게 해결할 수 있습니까? 미리 감사드립니다!
jQuery는 애니메이션하는 동안 숨겨진 오버플로를 추가합니다. 2 개의 솔루션을 찾았습니다.
첫 번째는! important (좋은 방법이 아님)를 사용하여 div에 보이는 오버플로를 추가하는 것입니다.
div.ext_div div {
overflow : visible!important;
background-color: red;
position: relative;
margin-top: -400px;
padding-left: 80px;
width: 200px;
height: 250px;
font-size: 350px;
}
jsfiddle.net/rxCDU/2
두 번째 step는 오버플로 를 사용 하고 재정의하는 것입니다.
$(this).animate({width: "150", height: "125", right: "+=200", "font-size": "150px" }, {duration : 1200, step : function(){
$(this).css('overflow', 'visible')
}})
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다