问题描述
我有这个div（其中包含我网站的内容。当某些东西无法使用jQuery效果正确验证时，我想使其抖动。（“ shake”）。但是，我根本无法使其抖动而是，div消失了一段时间，然后重新出现，这与我切换任何参数无关，都是发生这种情况。切换参数的唯一作用是更改消失的持续时间。
我一直无法解决很多问题（这实际上是我对jQuery的首次使用，也是我期望该项目使用的唯一jQuery）。
添加google apps脚本标记（我又添加回去）的原因是因为该项目正在使用Google Apps脚本。 我正在使用它从Google Spreadsheet中提取数据（这避免了支付和维护数据库的费用）。
令人反感的jQuery（当前位于HTML文件中）：
$(document).click(function(){
$("#container").effect( "shake", {times:4}, 1000 );
});
这是所有代码：
function getTournamentInfo(){ google.script.run.withSuccessHandler(setTournamentInfo).grabTournamentInfo() } function setTournamentInfo(systemData){ // insert tournament header var tournamentBanner = document.createElement("h1"); var tournamentBannerText = document.createTextNode(systemData[0]); tournamentBanner.appendChild(tournamentBannerText); document.getElementById("container").insertBefore(tournamentBanner,document.getElementById("maindata")); //create a space document.getElementById("container").insertBefore(document.createElement("br"),document.getElementById("maindata")); //insert chamber header var chamberBanner = document.createElement("h2"); var chamberBannerText = document.createTextNode(systemData[1]); chamberBanner.appendChild(chamberBannerText); document.getElementById("container").insertBefore(chamberBanner,document.getElementById("maindata")); //insert session header var sessionNumber = document.getElementById("sessionNameNumber"); var sessionNumberText = document.createTextNode(systemData[2]); sessionNumber.appendChild(sessionNumberText); } var ids = []; var names = []; var school = []; function getData(){ google.script.run.withSuccessHandler(setIdData).grabDebaters(); } function setIdData(systemData){ for (var i=0; i<systemData[0].length-1; i++) { ids.push(systemData[0][i]); names.push(systemData[1][i]); school.push(systemData[2][i]); console.log(names[3]); } makeRows(); } function makeClassroom() { } function makeRows() { for (var i=0; i<ids.length-1; i++) { generateDebaters(); } } var nameSchoolCounter = 0; // this is used to ensure that all the names are iterated through function generateDebaters() { var mainTable = document.getElementById("maindata"); var debaterRow = mainTable.insertRow(-1); debaterRow.setAttribute("onmouseover","darkenRow(this)"); debaterRow.setAttribute("onmouseout","lightenRow(this)"); var nameCell = debaterRow.insertCell(0); nameCell.innerHTML = names[nameSchoolCounter]; nameCell.setAttribute("id","debater"); var schoolCell = debaterRow.insertCell(1); schoolCell.innerHTML = school[nameSchoolCounter]; schoolCell.setAttribute("id","debater"); nameSchoolCounter++; var speech1Cell = debaterRow.insertCell(2); speech1Cell.innerHTML = '<input name="Speech 1" placeholder="Enter 1-6">' var speech2Cell = debaterRow.insertCell(3); speech2Cell.innerHTML = '<input name="Speech 2" placeholder="Enter 1-6">' var speech3Cell = debaterRow.insertCell(4); speech3Cell.innerHTML = '<input name="Speech 3" placeholder="Enter 1-6">' var ethosCell = debaterRow.insertCell(5); ethosCell.innerHTML = '<input name="Ethos" placeholder="Enter 1-3">' var nomCell = debaterRow.insertCell(6); nomCell.innerHTML = '<input type="checkbox" id="nomBox" name="nom"/>' } function darkenRow(row) { row.style.backgroundColor = "rgba(0,0,0,.6)"; } function lightenRow(row) { row.style.backgroundColor = "rgba(0,0,0,0)"; } function submitProceduresGraphics(){ // this does all the graphical procedures for submitting // this prevents the divs width and height from disappearing (it's set as display: table in the stylesheet) var container = document.getElementById("container"); var containerStyle = getComputedStyle(container); container.style.width = containerStyle.width; container.style.height = containerStyle.height; while (container.firstChild) { container.removeChild(container.firstChild); } return submitProcedures(); } function submitProcedures(){ //incomplete method return students; } //below is what actually runs getData(); getTournamentInfo();
h1{ font-family: 'Lato', sans-serif; font-weight: 700; font-size: 36px; color: white; margin-bottom: 0px; } h2{ font-family: 'Lato', sans-serif; font-weight: 700; font-size: 20px; color: white; margin-top: 0px; } #maindata{ border-collapse: collapse; border: 0px; width: 70%; margin-top: 40px; margin-left: auto; margin-right: auto; text-align: center; font-family: 'Lato', sans-serif; font-weight: 700; font-size: 18px; color: white; white-space: nowrap; } #maindata td{ margin-left:0px; margin-right: 0px; padding: 4px; border: 0px; border-image-width: 0px; } #maindata td#debater{ font-family: 'Lato', sans-serif; font-weight: 400; font-size: 14px; } body{ background: url(https://d3591ee267da5305673fdd35d46a7c93a6509bd1.googledrive.com/host/0B3UFP8Xs5x7WUldKaFZJTjhkbWM); } #container { background-color: rgba(0,0,0,.5); padding-left: 40px; padding-right: 40px; display: table; margin: auto; border-radius: 6px; position: relative; top: 100%; transform: translateY(20%); } input { background-color: none; } #nomBox { margin-top: 2.5px; margin-bottom: 2.5px; width: 18px; height:18px; } #sessionName { float: right; margin-top: 26.2px; text-align: center; font-family: 'Lato', sans-serif; color: white; font-weight: 700; font-size: 18px } #sessionNameNumber{ color: white; font-family: 'Lato', sans-serif; margin-top: 0px; font-size:66px; font-weight: 700; margin-bottom: 4px; } /* below here is the CSS for the submit button */ .button { border: 0 none; border-radius: 2px 2px 2px 2px; color: #FFFFFF; cursor: pointer; font-family: Lato,sans-serif; font-size: 12px; font-weight: bold; line-height: 20px; margin-left: auto; margin-right: auto; margin-bottom: 40px;; margin-top: 40px; padding: 7px 10px; text-transform: none; transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s; width: 10%; /* auto */ text-align: center; /* DELETE WHEN WIDTH AUTO */ } .button.green { background: none repeat scroll 0 0 #46b98a; color: #FFFFFF; } .button.green:hover { background: none repeat scroll 0 0 #444444; color: #FFFFFF; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!-- Use a templated HTML printing scriptlet to import common stylesheet. --> <?!= HtmlService.createHtmlOutputFromFile('Stylesheet').getContent(); ?> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <link href='http://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'> <!-- This has a font called Lato because TNR was hurting my eyes. Btw Google Fonts is awesome !--> <title>autoTab</title> </head> <body> <div id="container"> <div id=sessionName>SESSION<br><p id="sessionNameNumber"></p></div> <!-- Right now, this is brining up an unattractive page when submitted. We should get rid of that: https://mashe.hawksey.info/2014/07/google-sheets-as-a-database-insert-with-apps-script-using-postget-methods-with-ajax-example/ !--> <table id="maindata"> <tbody> <tr> <td> Debater Name </td> <td> School </td> <td> <!-- Noice--> Speech 1 </td> <td> Speech 2 </td> <td> Speech 3 </td> <td> Ethos </td> <td> Nom? </td> </tr> </tbody> </table> <div class='button green center' onclick="submitProceduresGraphics()">Submit Scores</div> <p> </body> </html> <!-- Store data passed to template here, so it is available to the imported JavaScript. --> <script> $( document ).click(function() { $( "#hello" ).effect( "bounce", "slow" ); }); </script> <?!= HtmlService.createHtmlOutputFromFile('JavaScript').getContent(); ?> <!-- Use a templated HTML printing scriptlet to import JavaScript. -->
1楼
top: 100%应用于#container会引起您的问题。
删除样式似乎没有任何效果，因此我将其删除。
说明：当jQuery UI创建震动效果时，它首先将您的元素包装在div.ui-effects-wrapper ，后者是一个relative div.ui-effects-wrapper元素，并从该元素中复制任何位置样式（例如top ）。
然后，将元素（除去其原始位置样式）放置在此div中，并通过调整其left CSS属性来为动画添加动画效果。
在您的情况下，您拥有top: 100%应用于您的容器。
当jQuery将元素放置在其效果包装器中时，包装器同时具有以下position: relative和top: 100% ，这将您的元素（容器）从屏幕的底部边缘移开，不可见。
尝试将您的容器样式设置为top: 20px类的东西，看看效果如何。
希望我能帮上忙！