jQuery animations within a function call
I would like to have a function called in an onclick handler, within an IF statement... Confused?
I would be too, the code below should help... For some reason, I get "gotoIt is not defined" in FireBug.
I think people keep misunderstanding the question :P... the full code is below.
<!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>
And the 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;
}
Define the function, then call it.
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 */);
}
Edit 3: is this what you want?
$(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
}
});
加载中,请稍侯......
精彩评论