我有这个div（包含我网站的内容。当我使用jQuery效果无法正确验证时，我想让它动摇。（“摇晃”）。但是，我无法得到它相反，div会消失一段时间然后重新出现。无论我切换任何参数，都会发生这种情况。切换参数的唯一效果就是改变消失的持续时间。
我无法解决很多问题（这实际上是我第一次使用jQuery以及我预期该项目使用的唯一jQuery）。
添加Google应用脚本标记的原因（我将其添加回来）是因为此项目正在使用Google Apps脚本。我正在使用它来从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. -->
答案 0 :(得分：2)
top: 100%的 #container导致您的问题。删除样式似乎没有任何影响，所以我删除了它。
说明：当jQuery UI创建摇动效果时，它首先将您的元素包装在div.ui-effects-wrapper中，这是一个relative定位元素并复制任何位置样式（例如top ）来自你的元素。然后，它将您的元素（在原始位置样式中剥离）置于此div内部，并通过调整其left CSS属性来激活抖动。在您的情况下，您已将top: 100%应用于您的容器。当jQuery将你的元素放在其效果包装器中时，包装器同时具有position: relative和top: 100%，它将你的元素（容器）放在屏幕的底边之外，不在视图范围内。将容器样式设置为top: 20px，并查看其具有的效果。
希望我帮忙！