Question

我有以下JSFiddle，它可以正确使用固定的高度和宽度：http://jsfiddle.net/69td39ha/2/ 将鼠标悬停在上方时，动画正确完成。

我试图操纵上面的内容，使用没有固定高度和宽度的响应方法：http://jsfiddle.net/cer1ts9x/2/ 将鼠标悬停在上方时，动画显示不正确。

HTML：

<div class="pageImgHdrSub percPadTop banner">
     <a href="google_events.aspx" title=""><img src="http://appcenter.clickmeeting.com/uploads/2014/05/google-calendar-logo1.gif" alt="" /></a>
    <p class="companyInfo">View Events Calendar</p>
    <div class="cornerTL"></div>
    <div class="cornerTR"></div>
    <div class="cornerBL"></div>
    <div class="cornerBR"></div>
</div>

请帮我修改第二小提琴以确保动画正确显示

Answer 1

更新了您的fiddle

希望这就是你想要的？

基本上编辑了3个地方：

.pageImgHdrSub -> width: auto;

.banner div{ 
    -moz-border-radius:170px;
    -webkit-border-radius:170px;
    border-radius:170px;
}

js的第16行：

el.find('div').stop().animate({width:340,height:200},'slow',function(){

编辑：

对于更多圆形动画设置相同数量的宽度和高度。（在js中）边界半径应该是宽度/高度的一半，以获得一个漂亮的圆圈。

Answer 2

之前的图片是一个正方形，现在你有一个矩形图像 - 所以你不能得到一个完美的圆形圆圈，但改变width＆amp; animate函数中的height工作得很好：

el.find('div').stop().animate({
    width: 360,
    height: 160
},

Updated JsFiddle

如何为叠加动画设置图像DIV

2 个答案: