javascript - jQuery UI效果 "shake"让div消失

Question

我有这个 div(其中包含我网站的内容。我想在使用 jQuery 效果(“摇动”)无法正确验证某些内容时摇动它。但是，我无法将其发送到完全不摇动。相反，div 会消失一段时间，然后重新出现。无论我切换任何参数，都会发生这种情况。切换参数的唯一效果是改变消失的持续时间。

我没能解决太多问题(这实际上是我第一次使用 jQuery，也是我预计该元素使用的唯一 jQuery)。

之所以添加 google apps script 标签(我把它加回来了)是因为这个元素使用的是 Google Apps Script。我用它从 Google 电子表格中提取数据(这避免了支付和维护数据库)。

有问题的 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. -->

Answer 1

应用于 #container 的

top: 100% 导致了您的问题。去掉样式好像没有什么效果，所以就去掉了。

说明:当 jQuery UI 创建震动效果时，它首先将您的元素包装在 div.ui-effects-wrapper 中，这是一个相对定位的元素，并且从您的元素复制任何位置样式(例如 top)。然后，它会将您的元素(去除其原始位置样式)放入此 div 内，并通过调整其 left CSS 属性来设置摇晃动画。在您的情况下，您已将 top: 100% 应用于您的容器。当 jQuery 将您的元素放在其效果包装器中时，包装器同时具有 position: relative 和 top: 100%，这会将您的元素(容器)置于底部屏幕边缘，视线之外。尝试将您的容器样式设置为类似 top: 20px 的样式，看看它的效果。

希望我有所帮助!