Animations jQuery dans un appel de fonction

Je voudrais qu'une fonction soit appelée dans un gestionnaire onclick, dans une instruction IF ... Confus?Animations jQuery dans un appel de fonction

Je serais aussi, le code ci-dessous devrait aider ... Pour une raison quelconque, je reçois "gotoIt is not defined" dans FireBug.

Je pense que les gens continuent de mal comprendre la question: P ... le code complet est ci-dessous.

<!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>

Et le 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; 
    }

Source

2010-06-21 Barrie Reader

modifié ma réponse, et voici une copie: http://jsfiddle.net/P9bNk/ – tcooc

définit la fonction, puis l'appeler.

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

Édition 3: c'est ce que vous voulez?

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

Source

2010-06-21 22:35:45 tcooc

Hmm, merci mais le ** IF ** déclaration doit envelopper autour des fonctions. À moins qu'il y ait une meilleure façon de le faire? –

Vous pouvez utiliser des fonctions anonymes. Je modifie mon message pour l'inclure. – tcooc

Non, le si n'a pas besoin d'entourer la fonction. Si les blocs ne créent pas leur propre portée. Wrapping si autour de la fonction ne fait rien, vraiment. La fonction ne fonctionnera que lorsqu'elle sera appelée, et la façon dont digitalFresh l'a fait ce que vous voulez. – Mark

Animations jQuery dans un appel de fonction

Répondre

Questions connexes