jQuery的動畫從中心到全寬DIV相同的高度/寬度

我想動畫從小尺寸到全屏尺寸的div然後隱藏，但問題是，它沒有居中，寬度和高度不一樣，如何我可以處理它，有人可以建議嗎？jQuery的動畫從中心到全寬DIV相同的高度/寬度

這是我到目前爲止創建：

$(document).ready(function() { 
 
    $(".circle-centered").animate({ 
 
\t width:"100%", 
 
\t height:"100%", 
 
     marginTop: -$('.circle-centered').outerHeight()/2 
 
    }, 5000); 
 
});

.circle-centered { 
 
\t width: 20px; 
 
\t height: 20px; 
 
\t position: absolute; 
 
\t left: 0; 
 
\t right: 0; 
 
\t margin-left: auto; 
 
\t margin-right: auto; 
 
\t top: 50%; 
 
\t margin-top: -10px; 
 
\t border-radius: 50%; 
 
\t z-index: 3; 
 
\t background: #ff0000; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="circle-centered"></div>

來源

2017-03-06 Sanjeev Kumar

您還需要動畫的「頂」財產優爾有它設置爲50％

$(document).ready(function() { 
 
    $(".circle-centered").animate({ 
 
\t width:"100%", 
 
\t height:"100%", 
 
    top:0, 
 
     marginTop: -$('.circle-centered').outerHeight()/2 
 
    }, 5000); 
 
});

.circle-centered { 
 
\t width: 20px; 
 
\t height: 20px; 
 
\t position: absolute; 
 
\t left: 0; 
 
\t right: 0; 
 
\t margin-left: auto; 
 
\t margin-right: auto; 
 
\t top: 50%; 
 
\t margin-top: -10px; 
 
\t border-radius: 50%; 
 
\t z-index: 3; 
 
\t background: #ff0000; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="circle-centered"></div>

來源

2017-03-06 10:45:29

感謝您的回答，我該如何控制寬度和高度？我也想讓高度和寬度相同大小 –

您在調用animate方法時已將它們設置爲100％。您可以將它們設置爲固定的寬度/高度，因爲它們相對於父元素是相對的，所以實際尺寸將根據您顯示的圓圈的位置而變化。或者你可以設置父div的寬度/高度屬性。 –

得到它的工作，謝謝！ –

我不知道你爲什麼設置margin-top：-10px，但是用我的測試它運行良好。

https://fiddle.jshell.net/tr9ojbxn/

我只是說頂到動畫。讓我知道。

乾杯

來源

2017-03-06 10:53:55

jQuery的動畫從中心到全寬DIV相同的高度/寬度

回答

相關問題