我想在 IF 语句中的 onclick 处理程序中调用一个函数...感到困惑吗？
我也是，下面的代码应该有帮助...出于某种原因，我在 FireBug 中得到 "gotoIt is not defined"。
我认为人们一直在误解这个问题 :P...完整的代码在下面。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- REQUIRE COMMON VARIABLE FILE -->
<? require 'sys/common.php'; ?>
<title><? echo $projectName; ?></title>
<link rel="stylesheet" href="css/reset.css" type="text/css" />
<link rel="stylesheet" href="css/screen.css" type="text/css" />
<script src="js/jquery-1.4.2.js" type="text/javascript" language="javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
if ($(window).width()<1259) { //Small
function gotoIt(x,y) {
$('.elements').animate({
left: x+'px',
top: y+'px'
}, 500, function() {
});
}
} else { //Large
function gotoIt(x,y) {
$('.elements').animate({
left: x+'px',
top: y+'px'
}, 500, function() {
});
}
};
});
</script>
</head>
<body onload="">
<!-- SITE CONTAINER -->
<div class="section">
<!-- CENTRAL CONTAINERS -->
<ul class="elements" style="height:4884px; width:6000px;">
<li>1<br/><a href="#" onclick="javascript:gotoIt(1620,1130);">Next</a></li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li>18</li>
<li>19</li>
<li>20<a name="test"></a></li>
</ul>
</div>
</body>
</html>
还有 CSS:
body {
font-family: arial;
font-size: 62.5%;
text-align: center;
background-color: #fff;
}
/* CONTAINERS */
div.section{
border:1px black solid;
width:100%;
height: 100%;
min-height: 100%;
position:relative;
clear:both;
}
div.section h3{
margin-bottom:10px;
}
div.section li{
float:left;
vertical-align: middle;
}
div.pane{
overflow:auto;
clear:left;
margin: 10px 0 0 10px;
position:relative;
width:826px;
height:322px;
}
ul.elements{
background-color:#5B739C;
position:absolute;
top:0;
left:0;
}
ul.elements li{
width:1280px;
height:815px;
font-weight:bolder;
border:1px black solid;
text-align:center;
margin-right:200px;
margin-bottom: 200px;
background-color:#DDD;
font-size: 100px;
}
#pane-options ul.elements li{
margin:5px;
}
最佳答案
定义函数，然后调用它。
function gotoIt(x,y) {
$('.elements').animate({
left: x+'px',
top: y+'px'
}, 500);
}
if ($(window).width()<1259) { //Small
gotoIt(/* parameters here */);
} else { //Large
gotoIt(/* parameters here */);
}
编辑 3:这是您想要的吗？
$(document).ready(function() {
if ($(window).width()<1259) { //Small
(function(x, y) {
$('.elements').animate({
left: x+'px',
top: y+'px'
}, 500);
})(20,20); //arguments x and y
} else { //Large
(function(x, y) {
$('.elements').animate({
left: x+'px',
top: y+'px'
}, 500);
})(-20,-20); //arguments x and y
}
});
关于javascript - 函数调用中的 jQuery 动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3088945/