函数调用内的jQuery动画

我想在一个IF语句中的onclick处理程序中调用函数......困惑？函数调用内的jQuery动画

我也是，下面的代码应该会有帮助......由于某种原因，我在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; 
    }

来源

2010-06-21 Barrie Reader

编辑我的答案，继承人副本：http://jsfiddle.net/P9bNk/ – tcooc 2010-06-21 23:04:23

定义函数，然后调用它。

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 
    } 
});

来源

2010-06-21 22:35:45 tcooc

嗯，感谢，但**的** IF语句需要环绕功能。除非我有更好的方法来做到这一点？ – 2010-06-21 22:41:56

你可以使用匿名函数。生病编辑我的帖子以包含它。 – tcooc 2010-06-21 22:43:33

不，如果不需要包装功能。如果块不创建他们自己的范围。如果围绕该功能包装，什么都不做，真的。该函数只有在调用时才会运行，digitalFresh具有它的方式可以实现您想要的功能。 – Mark 2010-06-21 22:44:15

函数调用内的jQuery动画

回答

相关问题