当浏览器调整大小时，jQuery按钮元素会移动

我有一个div元素，它附加了一些jQuery以使其具有反弹效果。该元素与其父亲相对定位。调整浏览器大小时，子元素会移动，并且在重新调整大小时不会保持中心位置，直到您停止重新调整浏览器大小。当浏览器调整大小时，jQuery按钮元素会移动

请问一些关于如何阻止这种情况发生的建议吗？

HTML

<div class="row"> 
    <div class="col-md-12"> 
     <div class="test"> 
      <div id="buttonbounce"></div> 
     </div> 
    </div> 
</div>

脚本

$(document).ready(function() { 
    function doAnimation() { 
     $("#buttonbounce").effect("bounce", {times:3}, 1000, doAnimation); 
    } 
    doAnimation(); 
});

请看看我的codepen看到它在行动

view codepen

来源

2015-09-10 user1659877

它使中央的位置，你只需要等待一点点 – Zl3n

提示：使用'jQuery的ui.min.js' http://jsfiddle.net/x1kLw28j/并且没有'jquery-ui.min.js' http://jsfiddle.net/x1kLw28j/1/ – Shehary

您需要申请保证金：0汽车;到包含div而不是按钮反弹。这解决了它。

.test {position:relative; 
     margin:0 auto; 
     width: 45px; 
     height: 45px;} 

#buttonbounce { 
    width: 45px; 
    height: 45px; 
    position: relative 
    top:30px;  
    background-image: url(http://cdn.flaticon.com/png/256/26037.png); 
    background-size: 45px; 
    cursor: pointer; 
    }

来源

2015-09-10 08:42:07

请试试这个：

.test {position:relative; 
     margin:0 auto; 
     width: 45px; 
     height: 45px;} 

#buttonbounce { 
    width: 45px; 
    height: 45px; 
    position: relative 
    top:30px;  
    background-image: url(http://cdn.flaticon.com/png/256/26037.png); 
    background-size: 45px; 
    cursor: pointer; 
    } url(http://cdn.flaticon.com/png/256/26037.png); 
    background-size: 45px; 
    cursor: pointer; 
    }

Demo

来源

2015-09-10 09:00:56

当浏览器调整大小时，jQuery按钮元素会移动

回答

相关问题