當瀏覽器調整大小時，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按鈕元素會移動

回答

相關問題