fare un semplice cursore jQuery

Question

Sto cercando di insegnare a me stesso javascript/jquery quindi mi sono impostato un progetto per creare un dispositivo di scorrimento molto semplice per il mio sito web. Utilizzando Codeacademy e la libreria API jQuery ho familiarizzato con il codice, ma sto avendo difficoltà a fare i conti con la sintassi. Sto, quindi, venendo qui per cercare aiuto per mezzo di qualcuno che mi controlla i miei sforzi.

Ecco il codice:

CSS:

#wrapper { width: 500px; height:300px; display: block; overflow: hidden; } 
#slider {width: 1500px; clear: both; margin-left:0;} 
.content {float: left; width: 500px; height: 300px; display: block; background:grey;} 

HTML:

<div id="wrapper"> 
    <div id="slider"> 
     <div class="content"><p>blah</p></div> 
     <div class="content"><p>blah</p></div> 
     <div class="content"><p>blah</p></div> 
    </div> 
</div> 

<button id="left">left</button> 
<button id="right">right</button> 

e infine:

$#left.click(function { 
if ($('#slider').css('margin-left').between(0,-1500)) { 
    $('#slider').animate({ 
     margin-left : "+=500" 
    }, 500); 
}); 

} 
} 

che si traduce in movimento l'1500px livello div contenente l'ima ges lasciato da 500px quando si fa clic su un pulsante. Il cursore si trova all'interno di un contenitore div che ha una larghezza di 500 px e un overflow nascosto. L'istruzione if è quello di assicurarsi che il div non continuare a viaggiare a sinistra dopo aver raggiunto la fine del div contenitore

Sono del tutto grato a tutti coloro che possono aiutare con questa richiesta piuttosto egoista

Answer 1

Ecco il vostro codice js con gli errori di sintassi come sopra indicato, nonché un paio di altri errori che impedivano il corretto funzionamento del codice.

$('#left').click(function(){ 
    if ($('#slider').css('margin-left') <= '0px' && $('#slider').css('margin-left') >= '-1500px') {  
    $('#slider').animate({ 
      "margin-left" : "+=500" 
     }, 500); 
    }; 
}); 

Nota: Ho rimosso la funzione .Tra() dal codice dal momento che non sono riuscito a trovare alcuna documentazione su questo ovunque. Se hai il riferimento a questa funzione mi piacerebbe vederlo. Per ora, l'ho sostituito con un semplice confronto di valori.

Ecco un jsfiddle con il lavoro del codice:. http://jsfiddle.net/ghCX6/2/