Jquery animatie naar links

[Ronnyrr]

Hallo allemaal,

Voor de meeste is dit volgens mij heel simpel, maar ik kom er maar niet uit.
Ik wil een div #projectWrapper naar links laten animeren via Jquery. Die moet gebeuren als er op een pijl geklikt word, waarvoor ik een afbeelding gebruik in html.

De codes zien er als volgt uit.
HTML

HTML:

<div id="arrowLeft"><img src="images/arrowLeft.png" id="Left" width="20" height="75" alt="" /></div> <!-- #arrowLeft -->
                <div id="homeProjects">     
                    <div id="projectsWrapper">  
                     heleboel ongein
                     </div> <!-- #projectsWrapper -->
                </div> <!-- #homeProjects -->
            <div id="arrowRight"><img src="images/arrowRight.png" id="Right" width="20" height="75" alt="" /></div> <!-- #arrowRight -->

CSS

Cascading Stylesheet:

#arrowWrapper { width:920px; height:400px;}
#arrowLeft { width:20px; height:400px; float:left; cursor:pointer;}
#arrowRight { width:20px; height:400px; float:right; cursor:pointer;}
#homeProjects { width:840px; height:400px; position:relative; float:left; overflow:hidden; margin-left:25px;}
#projectsWrapper { width:999em; position:absolute; left:-850px;}

En dan de JQuery code die ik hiervoor gebruik, ik heb al een aantal verschillende geprobeert maar niks bleek te werken. Zoals:

JavaScript:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> 
<script>
$( "#Right" ).click(function(){
 $( "#projectsWrapper" ).animate({ left: "800px" }, 1000 )
  });
</script>

&

JavaScript:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> 
<script>
$( "#Right" ).click(function(){
  $( "#projectsWrapper" ).animate({
    left: 850
  }, {
    duration: 1000,
    step: function( now, fx ){
      $( "#projectsWrapper:gt(0)" ).css( "left", now );
    }
  });
});
</script>

&

JavaScript:

<script type="text/javascript"> 
$(document).ready(function(){

    $('#Right').click(function(){
        $("#projectsWrapper", this).stop().animate({left:'-800px'},{queue:false,duration:300});}
    );
});
</script>

Het probleem is dus dat er geen één werkt, en ik niet weet wat ik nu precies fout doe.
Misschien dat iemand me verder kan helpen en me de juiste richting in kan wijzen?

Bij voorbaat dank.

[Hooiopdevork]

In de eerste 2 gevallen van je javascript daar vergeet je $(document).ready(function(){}) om je functie heen te zetten, dus de javascript wordt te vroeg uit gevoerd.
Als je dit toevoegd werkt het wel.
In je laatste stukje javascript doe je dit wel maar gaat de animatie de verkeerde kant op -800px.

[Ronnyrr]

Bedankt,

Had ik toch helemaal over die regel heen gekeken om de functie aan te roepen, niet zo slim, maar bedankt!

Echter zit ik nog met 1 punt waar ik nu op vast loop, wellicht kan iemand mij daar nog verder mee helpen.

Als left op een bepaalde positie is, moet er niet meer verder geklikt kunnen worden. Dit heb ik op de volgende manier proberen op te lossen:

JavaScript:

<script type="text/javascript" >
$(document).ready(function(){
    $('#Right').click(function(rechts){
    //alert();
        $( "#projectsWrapper" ).animate({ left: "+=-845px" }, 1000 )
    }); 

    $('#Left').click(function(links){
    //alert();
        if("#projectsWrapper") {
        $.css({ left: "<0px" }.remove(links) )
        }
    
        else {
        $( "#projectsWrapper" ).animate({ left: "+=845px" }, 1000 )
        }
    });
});
</script>

Echter wil dit niet werken en heb ik geen idee hoe ik dit wel zou kunnen doen of welke kant ik op moet kijken hierbij. Misschien dat iemand wat meer informatie heeft over hoe dat kan?

Bij voorbaat dank.