Control jQuery Easing using keyboard

Question

I have jquery's easing plugin up and running on a very simple website, can be seen here: http://harrisonfjord.com/folio/

The code I have for anchor links (which call the jquery function to slide the window over to whichever div is pressed) is:

<a href="#" style="" onclick="Animate2id('#c1'); return false" rel="Greetings"><img src="img/btn1.jpg" /></a>
<a href="#" onmouseover="" onclick="Animate2id('#c2'); return false" rel="About Us"><img src="img/btn1.jpg" /></a>
<a href="#" onclick="Animate2id('#c3'); return false" rel="Plants Plus"><img src="img/btn1.jpg" /></a>
<a href="#" onclick="Animate2id('#c4'); return false" rel="Kia Cadenza"><img src="img/btn1.jpg" /></a>
<a href="#" onclick="Animate2id('#c5'); return false" rel="Panadol"><img src="img/btn1.jpg" /></a>
<a href="#" onclick="Animate2id('#c6'); return false" rel="Asics"><img src="img/btn1.jpg" /></a>
<a href="#" onclick="Animate2id('#c7'); return false" rel="Tooheys"><img src="img/btn1.jpg" /></a>
<a href="#" onclick="Animate2id('#c8'); return false" rel="Channel 7 Olympic Coverage"><img src="img/btn1.jpg" /></a>
<a href="#" onclick="Animate2id('#c9'); return false" rel="Hit us up!"><img src="img/btn1.jpg" /></a>
<span style="font-size:25px" id="display"></span>

And the javascript code is as follows:

$(window).keyup(function(e){
    if(e.keyCode == 39){
         //magical code goes here
    }
    return false;
});

function Animate2id(id,ease){ //the id to animate, the easing type
    var currentPage=id;
    var animSpeed=2000; //set animation speed
    var $container=$("#container"); //define the container to move
    if(ease){ //check if ease variable is set
        var easeType=ease;
    } else {
        var easeType="easeOutQuart"; //set default easing type
    }
    //do the animation
    $container.stop().animate({"left": -($(id).position().left)}, animSpeed, easeType);
}

I've tried setting up a variable for the Animate2id function that gets the current div that you're looking at, which could then be used to go to the next or previous div (but don't even know if I've done that correctly...).

Obviously still new to jquery/javascript so would very much appreciate any help.

Answer 1

First of all, I'd amend your HTML, click handlers should be put in javascript. Use the href attribute to point to your related div:

<div id="link-container">
    <a href="#c1" style="" rel="Greetings"><img src="img/btn1.jpg" /></a>
    <a href="#c2" rel="About Us"><img src="img/btn1.jpg" /></a>
    <a href="#c3" rel="Plants Plus"><img src="img/btn1.jpg" /></a>
    <a href="#c4" rel="Kia Cadenza"><img src="img/btn1.jpg" /></a>
    <a href="#c5" rel="Panadol"><img src="img/btn1.jpg" /></a>
    <a href="#c6" rel="Asics"><img src="img/btn1.jpg" /></a>
    <a href="#c7" rel="Tooheys"><img src="img/btn1.jpg" /></a>
    <a href="#c8" rel="Channel 7 Olympic Coverage"><img src="img/btn1.jpg" /></a>
    <a href="#c9" rel="Hit us up!"><img src="img/btn1.jpg" /></a>
    <span style="font-size:25px" id="display"></span>
</div>

Then in jQuery, bind all the handlers:

$("#link-container A").click(function(e) {
    e.preventDefault();
    Animate2id($(this).attr("href"));   
});

Then in Animate2id add a class on the current div:

function Animate2id(id, ease){ //the id to animate, the easing type
    $(".current").removeClass("current");
    $(id).addClass("current");

    // rest of this functions' code ...
}

With the class now on the selected div you can work out which direction you need to go in on left/right cursor press:

$(window).keyup(function(e){
    if (e.which == 37) { // left cursor
         var $prevDiv = $(".current").prev("div");
         Animate2id($prevDiv.attr("id"))    
    }

    if (e.which == 39) { // right cursor
         var $nextDiv = $(".current").next("div");
         Animate2id($nextDiv.attr("id"))    
    }
});