如何让Javascript / JQuery不移动页面上的其他元素？

Question

如何才能让动画代码不会隐藏文本div，这应该仅适用于切换显示/隐藏按钮？ 在我将动画代码添加到我的js页面后，它搞砸了我用于显示/隐藏div文本的其他jquery。

 $(document).ready(function() { $("#hide").click(function() { $("#data").hide(); $('#show').show(); $('#hide').css('display', 'none'); }); $("#show").click(function() { $("#data").show(); $("#hide").show(); $('#show').css('display', 'none'); }); }); $(document).ready(function() { $("#button").click(function() { var div = $("div"); div.animate({ height: '300px', opacity: '0.4' }, "slow"); div.animate({ width: '300px', opacity: '0.8' }, "slow"); div.animate({ height: '100px', opacity: '0.4' }, "slow"); div.animate({ width: '100px', opacity: '0.8' }, "slow"); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="hide">Hide</button> <button id="show">Show</button> <div id="data">If you click on the "Hide" button, I will disappear.</div> <button id="button" style="position:absolute;top:500px;left:0px;">Start Animation</button> <div id="div" style="background:#98bf21;height:100px;width:100px;position:absolute;"> </div> 

Answer 1

第一个id="div"选择器应为$("#div")

第二个按钮重叠，从<button>样式中删除position:absolute

如果您不想显示文本div，请将其注释掉或删除//$("#data").show(); 来自$("#show")点击事件

 $(document).ready(function() { $("#hide").click(function() { $("#data").hide(); $('#show').show(); $('#hide').css('display', 'none'); }); $("#show").click(function() { //$("#data").show(); $("#hide").show(); $('#show').css('display', 'none'); }); $("#button").click(function() { var div = $("#div"); div.animate({ height: '300px', opacity: '0.4' }, "slow"); div.animate({ width: '300px', opacity: '0.8' }, "slow"); div.animate({ height: '100px', opacity: '0.4' }, "slow"); div.animate({ width: '100px', opacity: '0.8' }, "slow"); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="hide">Hide</button> <button id="show">Show</button> <div id="data">If you click on the "Hide" button, I will disappear.</div> <button id="button" style="top:500px;left:0px;">Start Animation</button> <div id="div" style="background:#98bf21;height:100px;width:100px;position:absolute;"> </div>