[英]how to animate div from its center
我試圖從中心動畫div標簽。 最初我希望div標簽不可見。 當用戶點擊鏈接時,此div標簽應從其中心動畫。 我怎樣才能使用jquery實現這一點。 這是我目前的代碼。
<a href="#" class="linkone">link one</a><br><br><br><br>
<section class="one">one</section>
這是css
.one {
margin: 0 auto;
width: 200px;
height: 200px;
border: 1px solid red;
background: lightblue;
}
這是我的jquery
$('a').on('click', function (e) {
e.preventDefault();
var w = 200; //$('.one').outerWidth();
var h = 200; //$('.one').outerHeight();
var x = $('.one').width() / 2;
var y = $('.one').height() / 2;
var startW = h - y/2;
var startH = w - x/2;
var endTop = y - h/2;
var endLeft = x - w/2;
$('.one').animate({
opacity: 1,
width: (w+200) + 'px',
height: (h+200) + 'px',
top: endTop+'px',
left: endLeft+'px'
}, 1000);
console.log(endLeft);
});
像這樣: http : //jsfiddle.net/TJNTq/
$('.linkone').on('click', function (e) {
e.preventDefault();
var w = 200; //$('.one').outerWidth();
var h = 200; //$('.one').outerHeight();
var x = $('.one').width() / 2;
var y = $('.one').height() / 2;
var startW = h - y/2;
var startH = w - x/2;
var endTop = y - h/2;
var endLeft = x - w/2;
$('.one').show().animate({
opacity: 1,
width: (w+200) + 'px',
height: (h+200) + 'px',
marginTop: 0 + 'px'
}, 1000);
console.log(endLeft);
});
請注意,您的頂部和左側動畫沒有做任何事情,因為.one
div沒有絕對或相對定位。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.